jquery css continous rotate by 90 degrees on each button press

Question

I have found a solution that partially fits my needs. When pressing a button I need a div to rotate 90 degrees, on next press 90 degrees more etc. And i need another button which would rotate it in the opposite direction the same way. I found a JavaScript Fiddle and slightly modified it, but the problem is that on the button press the div would revert to its original position before each rotate. So its not possible to rotate it more than 90 degrees. How do I fix this? The second question is why would it rotate only once, if I change broderSpacing from "-90" to "90" (button works only once then nothing happens on click)?

JSFIddle

HTML

<div id="foo">Text</div>
<button onclick="rotateFoo()">rotate</button>

CSS

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

JS

function rotateFoo(){
    $('#foo').animate({borderSpacing: -90}, {
    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:'slow'
    },'linear')

}

Answer 1

I have made a little more straightforward example, please see https://jsfiddle.net/HwTMb/1517/

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

Also, I'm not really sure why do you need border-spacing.