SO animate CSS3 transform

by Taylor Lopez

HTML

<div id="foo">Text</div>
<button id="button">Button</button>

CSS

#foo {
   width:100px;
   height:100px;
   position:absolute;
   top:100px;
   left:100px; 
   border-spacing: 0;
   background-color:red;
}

JavaScript

var rotMax = 7;
var dir = true;
var rotatingNow = false;

$('#button').click(function(){
    if (rotatingNow == false)
    {
        rotatingNow = true;
        $('#foo').animate({  borderSpacing: dir == true ? ("" + (rotMax * 2)) : 0 }, {
            step: function(now,fx) {
                $(this).css('-webkit-transform','rotate('+(now - rotMax)+'deg)'); 
                $(this).css('-moz-transform','rotate('+(now - rotMax)+'deg)');
                $(this).css('transform','rotate('+(now - rotMax)+'deg)');
            },
            duration:'slow',
            complete: function(){dir = !dir; rotatingNow = false;}
        },'linear');
    }
});