CSS3 Spin Animation

A lot of people have been asking me about the code for my digital fireworks recently. Just how do I do those cool spinning and flipping and leaping things? Is is magic? Is it some special language?

No. Most of it is dead easy.

Today we’re going to look at a dead easy CSS3 spin animation which is triggered by the mouse :hover. Like this:

Image may be NSFW.
Clik here to view.

Wow! So how do we do that? Easy. Firstly you want to add a class to your image you want to rotate. I call this class “rotate”. For those of you who are newbies this is the html I am using:

<img alt="liquid logo drop with text iq" style=";height:auto;;position:inherit !important;" indx="57982382" rank="1" irank="463080048" atitle="CSS3 Spin Animation" data-src="//IMAGEFILE.png" data-srcset="" class="rs-article-img-src do-lazy">

Once that is done you want to copy the following CSS code and drop it into your CSS file:

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

Save and reload your page and you will now find that your image rotates 360 degrees when you hover over it. Pretty cool and dead easy! Just give the image a class and copy the code! And in the future if you ever want any other images to rotate, just add class=”rotate”!

Slowmo Style

For those who want to get creative you can change the transition duration to a higher number so that is rotates slowmo style…

Image may be NSFW.
Clik here to view.

Ninja Style

And if you want to go nuts you can change it so that it spins mega fast lots of times by lowering the transition duration and then setting a much higher degree of rotation. Ninja style…

Image may be NSFW.
Clik here to view.

The post CSS3 Spin Animation appeared first on Liquid Web Design Company London.