일단 해보는 코딩/CSS

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

eun_zoey2 2023. 4. 27. 21:53
728x90
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%;
}