每次按下按钮时jquery css连续旋转90度

Question

我找到了部分满足我需求的解决方案。当按下一个按钮时，我需要一个 div 旋转 90 度，然后再按 90 度等等。我需要另一个按钮，它会以相同的方式向相反的方向旋转。我找到了一个 JavaScript Fiddle 并稍微修改了它，但问题是在按下按钮时 div 会在每次旋转之前恢复到原来的位置。所以它不可能旋转超过 90 度。我该如何解决？第二个问题是，如果我将 broderSpacing 从“-90”更改为“90”​​(按钮仅工作一次，然后点击时没有任何反应)，为什么它只旋转一次？

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

我做了一个更直接的例子，请看https://jsfiddle.net/HwTMb/1517/

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

此外，我不太确定为什么需要边框间距。