호버 활성화 이미지 회전

호버 시 이미지 회전과 같은 동적 동작을 웹페이지에 통합하면 사용자 참여도를 높일 수 있습니다. 원형 테두리가 있는 이미지에 CSS를 사용하여 이 효과를 얻으려면 다음 단계를 따르세요.

1. Rotate()를 사용한 CSS3 전환

CSS3 전환을 활용하여 마우스 오버 시 이미지를 부드럽게 회전합니다. 전환 속성은 애니메이션의 지속 시간과 여유 기능을 정의합니다. 이 경우 전환 기간을 0.7초로 설정하고 Ease-in-out easing 함수를 지정합니다.

img {
  transition: transform .7s ease-in-out;
}

2. 호버 변환

호버 시 이미지를 회전하려면 회전() 함수와 함께 변환 속성을 사용하여 원하는 회전 각도를 설정합니다. 이 예에서는 이미지를 360도 회전합니다.

img:hover {
  transform: rotate(360deg);
}

3. HTML 구현

HTML 코드 내에 적절한 소스와 크기의 이미지 요소를 배치합니다.

샘플 코드

전체 코드는 다음과 같습니다. 회전하는 이미지 효과를 보여주는 샘플:

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

이 코드를 사용하면 사용자가 이미지가 360도 부드럽게 회전합니다.