How to rotate/spin an image on hover using CSS3

How to rotate/spin an image on hover using CSS3

by adesignguy

Posted on 25/01/2016 22:10:50 | Code


Ever wondered how to spin an image on hover? It's easy! First add the CSS below to your stylesheet CSS and then add the class "spin" to an image you want to spin, for instance, a social media logo. Job done! Remember this effect only works on browsers supporting CSS3 effects

CSS:

.spin {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.spin:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}