Search code examples
csshovercss-transitionscss-transforms

Spin or rotate an image on hover

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" />

Solution

  • 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.sstatic.net/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