单击时以增量方式旋转图像

Question

我正在尝试向我的网站添加一个数字表盘图像，该图像在被单击时会以小幅增量旋转。这里的 javascript 正是我要找的：CSS3 transition on click using pure CSS

但是使用那个代码，它只旋转一次，然后当再次点击时，它又回到原来的位置。我已经尽我最大的能力摆弄代码（包括我尝试随机的事情直到某些东西起作用）并且我已经设法让它在第一次和第二次点击时旋转 36 度，但我不确定之后如何让它继续旋转。我希望它能够在每次点击时旋转 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

单击时以增量方式旋转图像

Rotating Image In Increments On Click

javascript

css

increment

image-rotation