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

CSS를 사용하여 마우스 오버 시 이미지 회전 또는 회전 에뮬레이션

이미지에 마우스를 올렸을 때 원하는 회전 또는 회전 효과를 얻으려면 CSS를 특정 속성 및 전환과 함께 활용할 수 있습니다. . 구현 방법은 다음과 같습니다.

코드 구현

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

제공된 HTML 코드에서 각 이미지 요소는 위의 CSS 스타일을 사용하여 수정됩니다.

<code class="html"><img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/3DWAbmN.jpg" class="lazy" alt="CSS를 사용하여 호버에 이미지 회전 또는 회전 효과를 만드는 방법은 무엇입니까?" >
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/BLkKe.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS를 사용하여 호버에 이미지 회전 또는 회전 효과를 만드는 방법은 무엇입니까?" ></code>

설명

• 테두리 반경: 이미지를 원형 모양으로 설정합니다(테두리 반경 50%).
• 전환: 정의 마우스 오버 시 이미지 변형의 부드러운 전환(지속 시간 및 완화 기능).
• 변환: 회전: 마우스 오버 시 이미지의 변형 속성이 360도 회전하도록 설정되어 이미지가 회전하게 됩니다. .

이 CSS 구현을 사용하면 마우스를 이미지 위로 가져갈 때 이미지가 중앙을 중심으로 부드럽게 회전할 수 있습니다.

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