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.
HTML
|
![]("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.
This awesome script developed by oclockvn. Visit their official repository for more information and follow for future updates.
