小编sku*_*sts的帖子

我找到了一个部分符合我需求的解决方案.当按下按钮时我需要一个div旋转90度,然后再按90度等等.我需要另一个按钮,它会以相同的方向旋转它.我找到了一个JavaScript小提琴,并略微修改了它,但问题是在按钮按下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')

}