CSS를 사용하여 호버에서 이미지 회전을 만드는 방법은 무엇입니까?

호버 시 이미지 변형: 회전 또는 회전

CSS를 사용하여 호버 시 이미지 회전 효과를 얻으려면 CSS3 전환과 회전() 속성. 해결책을 자세히 살펴보겠습니다.

전환 속성은 시간이 지남에 따라 요소가 어떻게 변경되어야 하는지 정의합니다. 여기서 .7s 변환 Ease-in-out은 변환(회전)이 0.7초가 걸리고 이징 곡선을 따라야 함을 나타냅니다.

변형 속성은 요소의 위치, 크기 또는 회전을 수정하는 역할을 합니다. 변환: 회전(360deg)은 :hover 상태가 트리거될 때 브라우저에 이미지를 360도 회전하라고 지시합니다.

업데이트된 코드는 다음과 같습니다.

<code class="css">img {
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>

이 코드는 다음을 추가합니다. 이미지에 부드러운 애니메이션을 적용하여 커서를 이미지 위로 가져가면 이미지가 한 번 회전합니다. 회전 값을 사용자 정의하여 회전 각도를 제어하거나 전환 설정을 조정하여 애니메이션 속도와 여유를 수정할 수 있습니다.

위 내용은 CSS를 사용하여 호버에서 이미지 회전을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!