CSS3 Rotate Image On Hover

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

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='https://www.codeofaninja.com/' id='linkWrapRotator'>
     <img src='https://lh6.googleusercontent.com/-Q0p2PeGBLLg/UTr5zOvggSI/AAAAAAAAEeM/SrYuO-cYWQU/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!

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.