CSS3 Rotate Image On Hover

Last updated on July 22, 2021 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!

Published
Categorized as Lists+

By Mike Dalisay

Hi, I'm Mike Dalisay, a coder and startup founder. Thank you for visiting codeofaninja.com! I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on Twitter, LinkedIn, Facebook, and Instagram.

Back to top