I am facing an issue with rotating a div in my project. I have managed to partially achieve the desired functionality where pressing a button rotates the div by 90 degrees each time. However, when I try to rotate it further, the div reverts back to its original position before starting the rotation again. This restricts me from rotating it more than 90 degrees at a time. How can I solve this problem? Another question I have is why does the div only rotate once when I change 'borderSpacing' value from "-90" to "90"? After the first click, nothing happens.
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')
}