我想動畫旋轉關於某個點的div。我一直在嘗試使用jQuery中的animate()方法來實現這個功能。圍繞一個點旋轉div
我試過{rotate: "+=9deg"}動畫，但它不起作用。也嘗試使用MozTransform...，它沒有奏效。
然而，像這樣做的工作：{'-moz-transform': 'rotate('+degrees+'deg)'}
有什麼我做錯了用更簡單，更直觀的方式？或者它是一個jQuery中的錯誤？或者這是荒謬的方式，我應該做到「硬道路」？
rotate不是CSS屬性，所以.animate()將無法使用它。 （.animate()只是逐漸變化從一個值到另一個指定的CSS屬性。）
下面是完整的CSS樣式表，您需要獲取所有當前瀏覽器來旋轉元素。我用它們影響的相關瀏覽器評論了這些樣式。
.myclass {
-ms-transform: rotate(45deg); /* IE9 ? */
-moz-transform: rotate(45deg); /* FF3.5+ */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
transform: rotate(45deg); /* CSS3 (for when it gets supported) */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}
本示例將元素旋轉45度。 IE6/7/8 filter和-ms-filter樣式使用弧度而不是度數。
filter樣式與其他樣式之間的另一大區別是旋轉的原點。如果我記得正確，transform樣式圍繞中心旋轉，而MS樣式圍繞左上角旋轉。我相信這是可以調整的，但我們只是通過IE瀏覽器的方式解決了這個問題，它改變了元素的絕對位置，使它在同一個地方結束。顯然這對於動畫來說並不會幫助你。
最後要指出的是IE6/7 filter樣式實際上是無效的CSS（因爲它包含冒號和其他保留字符）。 IE8的-ms-filter變體是可以的，因爲它是用引號括起來的，但這在IE6/7版本中是不允許的。這個問題實際上打破了Firefox（也可能是其他瀏覽器）的CSS解析，以至於任何後續的樣式都不會被讀取。出於這個原因，我建議你在它自己的樣式表中包含它（或者至少IE特定的部分）。
很好的解釋的可能重複！但我正在尋找關於通過旋轉一個div來動畫div的信息。 – 2010-12-17 14:10:10
要繞一個點旋轉，請使用transform-origin屬性。例如，下面將圍繞左下角的點設置旋轉。
{
transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-webkit-transform-origin':'0% 100%;
-o-transform-origin:0% 100%;
-ms-transform-origin': 0% 100%
}
[旋轉jQuery的div元素（http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery） – 2010-12-16 17:25:23