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?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-04 14:48:01709browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn