360deg. Image rotate onhover using CSS

Rotate image 360 deg. on mouse hover using pure css. Using CSS 3 you can easily rotate image without jquery. This pure CSS code for rotating image on hover also work on touch devices.

360deg. Image rotate on hover using CSS

HTML

<img class='responsive-img materialboxed' src="https://4.bp.blogspot.com/-zw6YwbF_93M/U_dle8i9PqI/AAAAAAAABL0/P3vD7sAUKas/s640/css3.jpg" />



CSS

img {
 max-width: 200px;
 height: 200px;
 border-radius: 100%;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 transition: transform .5s ease-in-out;
 -webkit-transition: transform .5s ease-in-out;
 -moz-transition: transform .5s ease-in-out;
 -ms-transition: transform .5s ease-in-out;
}
 
img:hover {
 transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by oclockvn. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.