Rotate a div from a particular degree to another degree

Question

I have a div in a page which is already rotated to 60degree through css "transform: rotate(60deg)". I want to rotate and animate to the value in the angle variable starting the animation from it's current degree i.e. 60deg.

<script type="text/javascript">
    var angle = 0;
    $(document).ready(function () {
        $('#rotate').click(function () {
            angle += 90;
            $('#div1').animate({ rotate: angle }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 3000
            }, 'linear');

        });

    });
</script>
<style type="text/css">
    #div1
    {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 100px;
        left: 100px;
        border-spacing: 0;
        background-color: red;
        transform:rotate(60deg);
    }
</style>
<div id="div1">
    Text</div>
<div id="rotate" > Rotate</div>

It does rotate and animate but resets the div to it's default position first. Please help. Thank You.

Answer 1

This is a working fiddle for you cross browser: http://jsfiddle.net/tNLSL/

var angle = 60;
$(document).ready(function () {
        var start = 60;
        var end = start + 90;
    $('#rotate').click(function () {
                $('#div1').animateRotate(start,end);
                start = end;
                end = end +90;    
    });

});
$.fn.animateRotate = function(startAngle, endAngle, duration, easing, complete){
    return this.each(function(){
        var elem = $(this);

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

Answer 2

try to use this Example fiddle

css

    #div1
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
    border-spacing: 0;
    background-color: red;
    transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
}

js

   var angle = 60;
$(document).ready(function () {
    $('#rotate').click(function () {
        angle += 90;
        $('#div1').animate({ rotate: angle }, {
            step: function (now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                $(this).css('transform', 'rotate(' + now + 'deg)');
            },
            duration: 3000
        }, 'linear');

    });

});