Home > Article > Web Front-end > How to Create a Hover-Animated Spinning or Rotating Image with CSS?
How to Create a Hover-Animated Spinning or Rotating Image with CSS
Spinning or rotating images on hover is a common and visually appealing effect that enhances user engagement. To achieve this effect using CSS, follow these steps:
Firstly, ensure that the image has a circular border. This can be done by setting border-radius to 50%, as seen in the following code:
<code class="css">img { border-radius: 50%; }</code>
Next, add CSS3 animations to the image's transform property. transition enables smooth transitions between states, while rotate() applies the desired rotation effect:
<code class="css">img { transition: transform .7s ease-in-out; } img:hover { transform: rotate(360deg); }</code>
In this example, the image rotates a full 360 degrees on hover, creating a smooth spinning effect. You can adjust the rotate() angle to customize the rotation amount.
For demonstration purposes, here's an example HTML code snippet:
<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>
By combining these CSS and HTML elements, you can effectively create a hover-animated spinning or rotating image.
The above is the detailed content of How to Create a Hover-Animated Spinning or Rotating Image with CSS?. For more information, please follow other related articles on the PHP Chinese website!