CSS3 - Spin On Hover/Click

CSS3 Animations! This is fantastic!

by DavidLunt

HTML

<div id="icon">
    <img src="https://cdn3.vectorstock.com/i/thumb-large/50/27/green-circular-arrows-icon-cartoon-vector-13845027.jpg" />
</div>

<!-- Source = http://blog.vivekv.com/2011/05/01/rotate-image-360deg-when-mouse-hover-using-css-3/ -->

CSS

#icon {width:238px; height:250px;}

#icon{
    -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;
 
    }   
/* 
#icon:hover
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
*/

JavaScript

$(document).ready(function(){
    $('#icon').toggle(function(){
        $(this).css("-webkit-transform","rotate(360deg)");
    }, function(){
        $(this).css("-webkit-transform","rotate(0deg)");
    });
});