2011-03-09 187 views
13

是否可以使用Javascript旋轉div元素&不使用HTML 5?旋轉div元素

如果是這樣,我設置/更改元素的哪些屬性以使其旋轉?即,div.what?

PS:當我說旋轉我的意思是圍繞一個軸旋轉imagae,不是每X毫秒顯示不同的圖像旋轉。

+0

當您排除HTML5時,您還排除了CSS3嗎? – 2011-03-09 22:34:47

+0

嗯,我排除HTML5是因爲它不適用於所有瀏覽器,所以如果CSS3適用於所有瀏覽器(是嗎?),那麼我會使用它。 – Mach 2011-03-09 22:40:31

+0

IE不與CSS3和HTML5特別版本完全兼容之前IE9 – 2011-03-09 22:46:01

回答

4

是的,可以不使用HTML5旋轉div,但使用CSS3。

您可以在CSS3 Please上試驗CSS旋轉(打開.box_rotate規則)。

欲瞭解更多信息,谷歌爲:CSS如果你想辦法把那對所有的瀏覽器(包括IE6),那麼試着Raphaël工作旋轉的文本旋轉

+0

+1一個非常有趣的環節 – Benubird 2013-04-15 13:14:11

18

老問題,但答案可能幫助別人......

您可以使用旋轉所有主流瀏覽器專有的CSS標記(術語HTML5沒有特別與此有關,雖然)元素。

的如何旋轉的元件使用CSS 45度實施例:

.example { 
    -webkit-transform: rotate(45deg); /* Chrome & Safari */ 
    -moz-transform: rotate(45deg); /* Firefox */ 
    -ms-transform: rotate(45deg); /* IE 9+ */ 
    -o-transform: rotate(45deg); /* Opera */ 
    transform: rotate(45deg); /* CSS3 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */ 
} 

是的,MSIE語法是可怕的。請注意「sizingMethod ='自動展開'」 - 這對於避免裁剪結果至關重要。我很確定矩陣轉換(至少在某些能力上)也支持在MSIE 6中,但它在什麼情況下支持它們(以及它越來越難於處理8)更加不合理。

+0

+1的IE版本。 – 2011-12-09 07:50:48

+0

+1版本的IE版本。如果只有我知道..! – Leonard 2011-12-09 08:05:03

+0

@贊泰爾,確切!看看我的答案。 css3到IETransform。這個人是天才。 – 2011-12-09 08:07:18

4

我知道我遲到了。爲了後人的緣故,我想發佈this:這個網站很不錯,它甚至可以爲其相應的css3對應物執行矩陣轉換。

+1

+!感謝您發佈一個鏈接到自動生成矩陣變換的東西,回來這裏來做到這一點! :) – 2011-12-10 12:49:04

0

您可以在IE中使用Matrix。這是一個以交叉瀏覽器的方式解決它的函數。

http://kaisarcode.com/javascript-rotate

+3

歡迎來到堆棧溢出!請注意,由於兩個原因,不鼓勵裸鏈接到您自己的網站/產品。首先,答案應作爲獨立答案發布,而不是僅僅連接到外部網站。其次,自我推銷往往會在這裏被忽視,並且經常被標記爲垃圾郵件(特別是如果沒有披露您將鏈接到您自己的網站/產品)。 – 2013-01-23 02:01:42