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

Hover-Triggered Image Spinning

많은 웹 애플리케이션의 경우 대화형 애니메이션 효과를 추가하여 사용자 참여를 높이는 것이 바람직합니다. 그러한 효과 중 하나는 사용자가 이미지 위로 마우스를 가져갈 때 이미지를 회전하거나 회전시키는 것입니다. 이 문서에서는 원형 이미지에서 CSS를 사용하여 이 기능을 구현하는 방법을 보여줍니다.

이미지 회전을 위한 CSS 구현

마우스를 올리면 회전하는 이미지를 만들려면 '회전( )' 재산. 다음 CSS 코드 조각은 필요한 스타일을 제공합니다.

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

설명:

• 'transition' 속성은 ' 변환' 속성이 변경됩니다. 이 경우 'ease-in-out' 효과로 전환에 0.7초가 소요됩니다.
• 사용자가 이미지 위로 마우스를 가져가면 'hover' 스타일이 적용됩니다.
• 'rotate(360deg)'가 포함된 'transform' 속성은 이미지를 360도 회전시켜 회전 효과를 만듭니다.

HTML에 스타일 적용

아래 HTML 코드 스니펫에서 이미지는 'img' 태그를 사용하여 삽입됩니다.

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

CSS 코드를 이 HTML 페이지에 연결하면 사용자가 해당 페이지 위로 마우스를 가져가면 이미지가 회전합니다. 이는 웹 애플리케이션에 대화형 요소를 추가하는 간단하고 효과적인 기술을 보여줍니다.

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