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

我找到了一个部分符合我需要的解决方案。当按下一个按钮时，我需要一个div来旋转90度，下一次再按90度等等。我需要另一个按钮，它将以相同的方式向相反方向旋转。我发现了一个JavaScript提琴，并对其进行了轻微修改，但问题是按下按钮时，div会在每次旋转之前恢复到其原始位置。所以它不可能旋转超过90度。我该如何解决这个问题？第二个问题是，如果我将broderSpacing从“-90”更改为“90”（按钮只工作一次，那么单击时什么也不会发生），为什么它只旋转一次

HTML

JS

---

你可以稍微改变一下，让它成为你想要的东西：

和HTML：

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

文本
旋转
旋转

请参见演示

---

您也可以使用这个js库

我已经做了一个更简单的示例，请参见

---

另外，我也不确定为什么需要边界间距。

安东的回答是一个很好的开始，但对于任何想在两个方向上旋转的人来说，这需要一些工作。下面是一个演示：

---

您的“

now

”值来自哪里？你需要一种方法来存储元素的新位置（多个元素的数组），“现在”可以添加到当前位置（或者在实现另一个位置时进行减法）。有趣的是，我不知道“现在”从何而来。我以这个JSFIDLE为基础。请测试一些数字或添加一些条件来修复它。现在让我来修。

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

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')

}

    var rotate=0;
function rotateFoo(){
    $('#foo').animate({borderSpacing: -90}, {
    step: function(now,fx) 
    {
         rotate+=2.1;
      $(this).css('-webkit-transform','rotate('+rotate+'deg)'); 
      $(this).css('-moz-transform','rotate('+rotate+'deg)');
      $(this).css('transform','rotate('+rotate+'deg)');
    },
    duration:'slow'
    },'linear')

}

function rotateFoo2(){

    $('#foo').animate({borderSpacing: -90}, {
    step: function(now,fx) 
    {
        rotate-=2.1;
      $(this).css('-webkit-transform','rotate('+rotate+'deg)'); 
      $(this).css('-moz-transform','rotate('+rotate+'deg)');
      $(this).css('transform','rotate('+rotate+'deg)');
    },
    duration:'slow'
    },'linear')

}

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

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

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

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