Spin or rotate an image on hover

css hover css-transitions css-transforms
user3597950 picture user3597950 · May 16, 2014 · Viewed 220.2k times · Source

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 :

Answer

web-tiki picture web-tiki · May 16, 2014

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

Rotating image :

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          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

Related questions

CSS transition fade on hover

I've encountered a problem with CSS transitions. I'm designing a CSS gallery for my portfolio and I need my images to fade in on hover. I've been playing around with this for over an hour and I was hoping someone …

Read More
Using CSS to transition the fill property of an SVG path on hover

I'm including an SVG image file on my page within an object tag, like this: <object type="image/svg+xml" data="linkto/image.svg"> <!-- fallback image in CSS --> </object> The image in …

Read More
Transition only for the border on hover, but not for background

Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1…

Read More