SO animate CSS3 transform

by mgibsonbr

HTML

<div id="box"></div>

CSS

#box {
   width:100px;
   height:100px;
   position:absolute;
   text-indent: 90px;
   background-color:red;
    display:none;
}

JavaScript

function randomNum(min,max) { return min + Math.random()*(max-min); }
var offsetStartX = 50;
var offsetEndX = 350;
var offsetStartY = 50;
var offsetEndY = 350;

$('#box').each(function() {
    $(this).css({ 'left' : randomNum(offsetStartX, offsetEndX),
        'top' : randomNum(offsetStartY, offsetEndY) });
    $(this).show("fast",function() { 
        var element = $(this);
        var startDegree = 90;
        var endDegree = 0;
        $({ i:startDegree }).animate({ i: endDegree }, {
            step: function(now,fx) {
                var cssObj = {
                    msTransform: 'rotate('+ now + 'deg)',
                    '-moz-transform' : 'rotate('+ now + 'deg)',
                    '-webkit-transform' : 'rotate('+ now + 'deg)',
                    '-o-transform' : 'rotate('+ now + 'deg)',
                    'transform' : 'rotate('+ now + 'deg)' };
                element.css(cssObj); 
            },
            duration:500
        },'linear');
    });
});