重置RotateY度沒有轉換

我使用css 3D轉換rotateY翻轉與CSS轉換的div。我希望圖像翻轉若干次：當轉換結束時，我再次觸發它直到達到某個計數器值。重置RotateY度沒有轉換

我想要做的是：當rotateY達到360度時，我想將它重置爲0以重新開始相同的旋轉。

會發生什麼：如果我重置爲0，div首先向後旋轉。我嘗試禁用「倒帶」前的變換屬性，沒有任何的運氣

有沒有恢復0度值，而不進行任何轉換/旋轉一個簡單的方法

我做了codepen來說明：？http://codepen.io/3MO/pen/QKogxE

這不是很圖形化的，但如果你點擊開始，然後復位，這將是顯而易見的

這裏是我的復位功能。

$('#reset').click(function() { 
    deg = 0; 
    countRotations = 0; 

    $('#card').attr('transition', 'transform 0'); 

    flipStarted = false; 
    flip($('#card'), 0); 
});

謝謝。

來源

2016-10-25 Joel

[這]（http://codepen.io/hari_shanx/pen/PGLKzN）是你應該做的。由於現有答案實際上是相同的，因此我不會發布爲答案。 – Harry

謝謝，它的工作原理。我沒有解釋，我嘗試了以下聲明： – Joel

$（'＃card'）。attr（'transition'，'none'）;但它沒有，也沒有工作。 – Joel

您需要將transition屬性設置爲0，然後將旋轉更改爲0（這樣它將立即旋轉），然後將轉換更改回「默認」值。

由於這裏@Harry是一個工作演示：

http://codepen.io/hari_shanx/pen/PGLKzN

來源

2016-10-25 09:01:26

我在評論中發佈了一個非常類似的演示。如果你願意，請隨時使用它。 – Harry

重置RotateY度沒有轉換

回答

相關問題