如何確定CSS3轉換的旋轉方向？

我想通過CSS3轉換和轉換將對象從-180度旋轉到180度。這工作正常，但我想控制旋轉的方向。如何確定它是順時針還是逆時針旋轉？如何確定CSS3轉換的旋轉方向？

2010-11-01 Monokai

我認爲你需要在你的動畫中設置一箇中點。我還沒有看到任何讓你指定旋轉方向的東西。 – drudge 2010-11-01 20:58:11

所以這是通過css3動畫屬性你的意思？是的，這也是我也想過的，但是我想只用簡單的css3轉換和轉換屬性來完成，如果可能的話。 – Monokai 2010-11-02 14:05:20

0 .. 180是順時針，0 .. -180是逆時針。所以，正數順時針旋轉，負數 - 其他方式。

我創建的如何旋轉一個例子：

<html> 
<style type="text/css"> 
.rotatedDiv { 
    margin-top: 200px; 
    margin-left: 200px; 
    -webkit-transition: -webkit-transform 3s ease-in; 
    -webkit-transform: rotate(1deg); 
    -moz-transform: rotate(1deg); 
} 

</style> 

<body> 
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'"> 
This div will do a spin when clicked! 
</div> 

</body> 
</html>

首先我們顯示旋轉格。當你點擊它時，它會旋轉。根據值 - 負值或正值，它將逆時針或順時針旋轉。

來源

2010-11-01 21:07:43

但是如果你想要在30度和40度之間轉換，只需要逆時針轉動？ – Monokai 2010-11-02 14:04:08

我加了個例子 – 2010-11-02 16:12:05

謝謝。最後，我想出了一個解決方案，由你的例子觸發。度數不受最小值0和最大值360的限制。例如，也可以指定-720。這樣你可以控制順時針和逆時針運動。 – Monokai 2010-11-06 09:37:11

看起來您還需要記住將「from」初始具體值放入，否則+/-方向符號表現不佳。

來源

2012-11-04 15:58:12 Uri

如何確定CSS3轉換的旋轉方向？

回答

相關問題