Spin or rotate an image on hover

Question

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

img {    border-radius: 50%;  }

<img src="http://i.imgur.com/3DWAbmN.jpg" />

Answer 1

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