Spin or rotate an image on hover

if you want to rotate inline elements, you should set the inline element to inline-block first.

i {
  display: inline-block;
}

i:hover {
  animation: rotate-btn .5s linear 3;
  -webkit-animation: rotate-btn .5s linear 3;
}

@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

It's very simple.

1. You add an image.

2. You create a css property to this image.

   img { transition: all 0.3s ease-in-out 0s; }
   

3. You add an animation like that:

   img:hover
   {
       cursor: default;
       transform: rotate(360deg);
       transition: all 0.3s ease-in-out 0s;
   }
   

You can use CSS3 transitions with rotate() to spin the image on hover.

Rotating image :

img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}

<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

Here is a fiddle DEMO

More info and references :

• a guide about CSS transitions on MDN
• a guide about CSS transforms on MDN
• browser support table for 2d transforms on caniuse.com
• browser support table for transitions on caniuse.com