CSS Rotate with jQuery on a DIV causes unusual snapping

Question

So I've seen a good example on how to rotate a DIV with jQuery and CSS3 manipulation, my issue now is that as I am trying to create a slick hover effect on a div, I require the DIV to go backwords to -15deg then forwards to 15deg.

In the example i've attached this effect to a click on buttons.

What happens is that the div seems to snap when you first press "bk" and then again subsequently when you press "fwd".

I can't seem to figure out why.

http://jsfiddle.net/ZnvKs/

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    border-spacing:0px;
}


$('#bk').click(function() {

    $('.red').animate({
        borderSpacing: -15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');
});

$('#fwd').click(function() {

    $('.red').animate({
        borderSpacing: 15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');

});​

Answer 1

If you debug the step function it happens twice, the first time the now parameter has a value of 0, the next time it has a value of 15.

Do you need all that. You can do the same with just CSS by updating classes.

UPDATE:

this is the script:

http://jsfiddle.net/carlosmartinezt/ZnvKs/3/

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    -webkit-transition: 0.5s linear;
    border-spacing:0px;
}
.red.bk{
    -webkit-transform: rotate(-15deg);
}
.red.fw{
    -webkit-transform: rotate(15deg);
}​

Then the script is simplified

$('#bk').click(function() {
    $('.red').removeClass("fw").addClass("bk");
});

$('#fwd').click(function() {
    $('.red').removeClass("bk").addClass("fw");

});​