如何將一個(gè)DIV旋轉(zhuǎn)的某一角度即90度/180度/270度及放大等問(wèn)題

本篇文章為大家展示了如何將一個(gè)DIV旋轉(zhuǎn)的某一角度即90度/180度/270度及放大等問(wèn)題，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

對(duì)前端是小白，不過(guò)有個(gè)gis系統(tǒng)的問(wèn)題必須要借助點(diǎn)前端技術(shù)了，所以臨時(shí)抱佛腳，發(fā)現(xiàn)這個(gè)解決問(wèn)題思路，雖然不完全算前端問(wèn)題，還是記錄下來(lái)，說(shuō)不定對(duì)誰(shuí)有幫助。

首先是90度，180度，270度的旋轉(zhuǎn)，代碼如下：

代碼如下:

-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/

上面2個(gè)都好理解 90度
下面IE濾鏡 rotation 有4個(gè)值 0 1 2 3 ；0是不旋轉(zhuǎn) 1=90度 2=180度 3=270度

實(shí)際使用發(fā)現(xiàn)，你放在style中不行，<DIV   ID= "oDiv "   STYLE= "width:100%;filter:progid:DXImageTransform.Microsoft.BasicImage(   Rotation=1); ">

這樣沒(méi)效果，必須放在css聲明中。如：

代碼如下:

#example {
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);
}

其次呢，其實(shí)你看到了，(40deg);也就是說(shuō)除了ie角度你隨便寫(xiě)就行了。而IE的角度任意角度就比較麻煩，要用ie矩陣濾鏡，代碼如下：

代碼如下:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

你可以嘗試一下，這個(gè)是大約40多度的角度。

嘗試之后瞬間覺(jué)得很強(qiáng)大，但是還有個(gè)大坑，那就是M11--M22哪里來(lái)的？

經(jīng)過(guò)學(xué)習(xí)，
M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) roation就是你的角度嘍，不過(guò)遺憾的是直接這樣寫(xiě)不行的，你必須自己算出數(shù)字，這里附贈(zèng)一個(gè)算三角函數(shù)的在線無(wú)網(wǎng)址：http://www.ab126.com/geometric/1689.html.

最后補(bǔ)充一下，DXImageTransform.Microsoft.Matrix可以讓你的div放大縮小，只要將M11--M22放大或縮小對(duì)應(yīng)倍數(shù)就行了，不過(guò)現(xiàn)在的寬屏看著有誤差啊。

上述內(nèi)容就是如何將一個(gè)DIV旋轉(zhuǎn)的某一角度即90度/180度/270度及放大等問(wèn)題，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。