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

}

- skunksts

---

你的 'now' 值从哪里来？你需要一种存储元素新位置的方法（多个元素的数组），以便 'now' 可以将其添加到当前位置（或在实现其他 button 时进行减法操作）。 - Kinnectus

有趣的是，我无法弄清楚“now”来自哪里。 我以这个链接JSFIDDLE为基础。 - skunksts

Answer 1

我已经做了一个更简单的例子，请参见https://jsfiddle.net/HwTMb/1517/

（说明：该链接是关于IT技术的示例代码，无法提供具体翻译）

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

此外，我不确定为什么您需要border-spacing。

- Anton Melnikov

Answer 2

Anton的回答是一个不错的起点，但对于希望在两个方向上进行旋转的人来说，还需要一些改进。这里有一个演示：https://jsfiddle.net/hyrLcw0f/

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);
}

- frog42

Answer 3

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

演示

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

}

以及HTML：

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

请查看演示 JSFIDDLE

您也可以使用这个 JS 库 Transit

- Mohammad Kermani

---

请测试一些数字或添加一些条件来修复它。让我现在修复它。 - Mohammad Kermani