jQuery Animate Transform Rotate

by jdcutter

HTML

<div id="foo"><img src="http://vignette4.wikia.nocookie.net/kirby/images/0/01/KDCol_Kirby_K64.png/revision/latest?cb=20120627075127&path-prefix=en" alt="weee"/></div>
<button onclick="rotateFoo()">rotate</button>

CSS

body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:20px;
    left:20px; 
    border-spacing: 0;
    background:none;
    transition: all 1s ease;
}

button {display:none;}

#foo img {width:100%;}
  #foo img:hover button {display: block;}

JavaScript

function rotateFoo(){
    var angle = ($('#foo').data('angle') + 1080) || 1080;
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#foo').data('angle', angle);
}