無標題文檔

回復討論(解決方案)

box_rotate {

-moz-transform: rotate(7.5deg); /* FF3.5+ */

-o-transform: rotate(7.5deg); /* Opera 10.5 */

-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’);

-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’)”; /* IE8 */

}

除了IE以外，其他瀏覽器都是用rotate函數(shù)，實現(xiàn)某個對象的旋轉(zhuǎn)。比如rotate(7.5deg)就表示順時針旋轉(zhuǎn)7.5度(degree)。

IE則需要用到一個復雜的濾鏡DXImageTransform.Microsoft.Matrix。它一共接受五個參數(shù)，前四個參數(shù)需要自行計算三角函數(shù)，然后分別寫成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋轉(zhuǎn)角度，如果順時針旋轉(zhuǎn)7.5度，則rotation就為7.5；第五個參數(shù)SizingMethod表示重繪方式，’auto expand’代表自動擴展到新的邊界。

除了這個濾鏡，IE還有一個稍微簡單一點的濾鏡DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值為1，2，3，0，分別表示順時針選擇90度、180度、270度和360度。

聲明：本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！如有疑問，請聯(lián)系admin@php.cn處理

總結(jié)

以上是生活随笔為你收集整理的html旋转三角菜单,css3 这个三角怎么旋转_html/css_WEB-ITnose的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。