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!