CSS3 Rotate Image On Hover

Have you seen our logo on the upper left corner? Try to hover on it, it will rotate 360 degrees. Looks cool? In this quick post, I'm going to show you how I did that using CSS3.

CSS:

#linkWrapRotator img {
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
     -ms-transition: all 1s ease-in-out; 
}

#linkWrapRotator img:hover { 
     -webkit-transform: rotate(360deg); 
     -moz-transform: rotate(360deg); 
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg); 
}

HTML used:

<a href='http://www.codeofaninja.com/' id='linkWrapRotator'>
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG2mgOrRF53CCWSDLVBaeUqeYvKN19eOmWgR3SkCftMrKZsGI6rY4dEZQ4COLAGK7s5BttF1xPIPtQGDAkaw9uHU5QzvlrDdqa97SMTETf_GZGbEqR-hDSMTZ9-Bnm2QiQ0elIiqtus9E/s205/ninja-icon200x200.png' />
</a>

You can also do the rotation in other degrees, not on 360, just change the value of "rotate" in our code. For example, you can do rotate(180deg);

Just play with it!

Now that was fast and easy, I know there are other ways to do it, like using jQuery. There would also be some variations in doing this, such as not having a <a> tag.

Please share your own beautiful work, experience and cases on the comment section below!

Tweet

For FREE programming tutorials, click the red button below and subscribe! :)

SUBSCRIBE to Receive Ninja Codes