[css] 트랜스폼 및 트랜지션 효과

22 Dec 2023

웹 개발에서 요소의 시각적 효과를 적용하는데 CSS의 트랜스폼과 트랜지션 속성을 사용할 수 있습니다. 이들은 사용자 경험을 향상시키고 웹 애플리케이션의 사용자 인터페이스를 보다 매끄럽게 만드는 데 도움이 됩니다.

CSS 트랜스폼

CSS 트랜스폼은 2D 또는 3D 영역의 요소를 변형하는 데 사용됩니다. transform 속성을 사용하여 요소를 이동, 회전, 크기 조정 및 기울임을 적용할 수 있습니다.

.my-element {
  transform: translate(50px, 50px);
}

위 코드는 .my-element의 위치를 현재 위치에서 오른쪽으로 50px, 아래쪽으로 50px 만큼 이동시킵니다.

CSS 트랜지션은 요소의 스타일 속성을 부드럽게 변화시키는 데 사용됩니다. 이를 통해 마우스 오버 또는 특정 이벤트 발생 시 요소의 스타일을 부드럽게 변경할 수 있습니다.

.my-element {
  transition: width 0.3s ease-in-out;
}

.my-element:hover {
  width: 200px;
}

위 코드는 .my-element의 너비를 마우스 오버시 0.3초 동안 부드럽게 변화시킵니다.

CSS의 트랜스폼과 트랜지션 속성을 사용하여 웹 요소에 다양한 시각적 효과를 적용할 수 있습니다. 이로 인해 사용자들은 보다 흥미로운 웹 경험을 할 수 있게 됩니다.