Rotate image 360deg when mouse hover using CSS 3

Hello

Today I have designed a landing page for my website http://www.vivekv.com with some nice jQuery effects. Soon after I published the site address on facebook, I got questions from my friends that how did I rotate the images. They first thought ( like me ) that it is because of jQuery code. But no, it is purely CSS3 ( therefore IE does not support it )

Adding rotation effect using the CSS3 transition property is posted below. Thanks david walsh for this code snippet

[css]
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
[/css]

Then just attach the class “rotate” with any image or text to rotate it 360 degree.

Demo can be found HERE and of course, on my home page as well

39 thoughts on “Rotate image 360deg when mouse hover using CSS 3

  1. This works great! Thanks so much! Any way you can add another image (not spinning) above the spinning image when hovered?

  2. What an absolutely cool effect. You got the timing down really good, too, because that rate of spin, etc., is especially pleasing.

  3. Hi,

    cool effect! is there a way to stop animation when the cursor leaves image? Apply effect only on mouse over event?

    Thanks in advice!

  4. Hey this is some great coding! Just wondering how I can get my image to continue to rotating while on hover? Any ideas would be great.

  5. Hi Vivek,

    Just curious, Is it possible to rotate when the page loads without javascript?

    Thank you, and excellent css3 code!
    Brian

Leave a Reply

Your email address will not be published. Required fields are marked *