Question

我每次点击时都试图顺时针旋转任何.test div 180。

我所做的基本上是：

如果没有发生旋转，请旋转至180˚。
如果已旋转至180˚，则旋转至360˚。
如果已将其旋转至360˚，请移除transform和transition属性并旋转至180˚。

$(".test").click(function(){
    var angle;
    var matrix = $(this).css("-webkit-transform")
    if (matrix == "none") { //div hasn't been rotated yet
        angle = 0;
    }
    else {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0]; //should be -1 if div is upside down, 1 if it is normal.
        if(a == 1) { 
            $(this).removeAttr('style');
            angle = 0;
        }
        else {
            angle = 180;
        }   
    }
    $(this).css({
        "-webkit-transform": "rotate("+(angle+180)+"deg)",
        "-moz-transform": "rotate("+(angle+180)+"deg)",
        "transform": "rotate("+(angle+180)+"deg)",
        "-webkit-transition": "-webkit-transform 0.3s ease-in", 
    });
});

这适用于前两次点击，但在第三次点击时，div会逆时针旋转，就好像它从360˚旋转到180°，尽管我已经删除了style属性。

这是一个工作小提琴：https://jsfiddle.net/wwny5q5d/3/

现在，令我非常好奇的是，如果我在调用alert之前添加debugger或.css()，则第三次旋转按顺时针顺时针方向进行。< / p>

alert("Now it will always rotate clockwise")
$(this).css({
    "-webkit-transform": "rotate("+(angle+180)+"deg)",
    "-moz-transform": "rotate("+(angle+180)+"deg)",
    "transform": "rotate("+(angle+180)+"deg)",
    "-webkit-transition": "-webkit-transform 0.3s ease-in", 
});

所以我的问题是：为什么我的div在第三次点击时不顺时针旋转，为什么包含alert使其有效？

Answer 1

使用

this.style.cssText.match(/\((\d+)deg\)/)[1])

获取原始的非计算值。

请参阅JS Fiddle demo。

Answer 2

在你的小提琴中，旋转被应用于div，当它从div中移除样式之前360。因此，它将角度设置为0，然后根据角度= 0旋转回180.警报对话框在设置CSS之前添加延迟，这允许删除样式，然后角度设置为0，然后CSS被应用了。我相信@Gothdo上面说的是不断向div旋转添加180而不是将角度重置为零。您可以看到已完成Here

为什么包含警报模式会影响CSS旋转方向？

2 个答案: