单击

Question

我试图在我的网站上添加一个编号的拨号图像，点击它时会以小的增量旋转。这里的javascript正是我正在寻找的：CSS3 transition on click using pure CSS

但是使用该代码，它只旋转一次，然后再次点击时，它会移回原来的位置。我已经尽最大努力摆弄代码（包括我尝试随机的东西，直到有效），并且我已经设法让它在第一次和第二次点击时旋转36度，但我和＃39;我不知道如何让它继续旋转。我希望它能够在每次点击时旋转36度，这样在点击10次后，它会将其恢复到原始位置。

我确定解决方案非常简单，但我似乎无法弄明白。任何帮助将不胜感激。

这是javascript：

$( ".crossRotate" ).click(function() {
//alert($( this ).css( "transform" ));
if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(36deg)");
} else {
    $(this).css("transform","rotate(72deg)" );
}

}）;

jsfiddle演示：http://jsfiddle.net/rv5PR/472/

Answer 1

您需要获取当前的旋转值，然后将36添加到该旋转值，然后使用该值设置元素的旋转：

$( ".crossRotate" ).click(function() {
    var rotation = getRotationDegrees($(this)) + 36;
    $(this).css("transform","rotate("+rotation+"deg)");
});

获得学位是轮换实际上有点棘手，我正在使用this answers solution to do that。

Fiddle Example

修改 有一个更好的方法来处理这个问题，我们可以简单地使用变量存储度数并按36递增。元素突然在另一个方向上360度左右移动的问题是由于旋转从360附近的某个数字转移到接近0的数字。它检测到它较小，因此逆时针方向。元素如何存储它的旋转默认情况下会在角度上进行%360，但只需越过360并且永远不会将角度重置为较低的值将使其永远不会逆时针方向。

var degrees = 0;
$( ".crossRotate" ).click(function() {
    degrees += 36;
    $(this).css("transform","rotate("+degrees+"deg)");
});

Fiddle Example