[CSS] transform / transition 속성을 이용해 상자모양 변형하기

transform/ transition 속성

 

.container {
  height: 100px;
  border: 4px solid black;
}
.container .item{
  width: 100px;
  height: 100px;
  background-color: rgb(247, 218, 165);
  transition: 1s; 
  /* 1초 동안 변형되면서 애니메이션처럼 자연스럽게 변환 */
}
.container .item:hover{
  /* 커서를 가져다 놓으면 */
  transform: rotate(45deg);
  /* 45도로 변환 */
  background-color: orange;
  border-radius: 50%;
}