How to Make an Image Spin on Hover with CSS?

Transforming an Image on Hover: Spin or Rotation

Achieving the effect of a rotating image on hover with CSS requires utilizing CSS3 transitions and the rotate() property. Let's delve into the solution:

The transition property defines how an element should change over time. Here, transform .7s ease-in-out indicates that the transformation (rotating) should take 0.7 seconds and should follow an easing curve.

The transform property is responsible for modifying the element's position, size, or rotation. transform: rotate(360deg) tells the browser to rotate the image by 360 degrees when the :hover state is triggered.

Here's the updated code:

<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>

This code adds a smooth animation to the image, causing it to rotate once when the cursor hovers over it. You can customize the rotate value to control the angle of rotation or adjust the transition settings to modify the animation's speed and easing.

The above is the detailed content of How to Make an Image Spin on Hover with CSS?. For more information, please follow other related articles on the PHP Chinese website!