單擊時以增量形式旋轉圖像

我試圖在單擊時以小增量旋轉的網站上添加一個編號的撥號圖像。來自這裏的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/

來源

2015-09-23 Eagle Jow

您將需要獲得當前旋轉值，然後添加36到，然後使用該值來設置元素的旋轉：

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

獲取度數是旋轉實際上有點棘手，我使用this answers solution to do that。

Fiddle Example

編輯 Acually有更好的方式來處理這個問題，我們可以簡單地具有可變商店度，增量由36。元素在另一個方向突然移動360度的問題是由於從360附近的某個數字旋轉到接近於0以上的數字。它檢測到它變小，因此逆時針旋轉。元素如何存儲它的旋轉將默認在角度上做%360，但是簡單地超過360並且永遠不會將角度重置爲較低的值將使得它不會逆時針旋轉。

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

Fiddle Example

來源

2015-09-23 00:29:43

正是我需要的。謝謝。 –

@EagleJow太棒了，如果這回答你的問題，你可以點擊這個答案左邊的複選標記。 –

我不確定如何在它恢復到原來的位置後不再瘋狂地旋轉，但我完全可以用它來工作。 –

單擊時以增量形式旋轉圖像

回答

相關問題