如何將一個DIV旋轉的某一角度即90度/180度/270度及放大等問題

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

對前端是小白，不過有個gis系統的問題必須要借助點前端技術了，所以臨時抱佛腳，發現這個解決問題思路，雖然不完全算前端問題，還是記錄下來，說不定對誰有幫助。

首先是90度，180度，270度的旋轉，代碼如下：

代碼如下:

-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個都好理解 90度
下面IE濾鏡 rotation 有4個值 0 1 2 3 ；0是不旋轉 1=90度 2=180度 3=270度

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

這樣沒效果，必須放在css聲明中。如：

代碼如下:

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

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

代碼如下:

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

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

嘗試之后瞬間覺得很強大，但是還有個大坑，那就是M11--M22哪里來的？

經過學習，
M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) roation就是你的角度嘍，不過遺憾的是直接這樣寫不行的，你必須自己算出數字，這里附贈一個算三角函數的在線無網址：http://www.ab126.com/geometric/1689.html.

最后補充一下，DXImageTransform.Microsoft.Matrix可以讓你的div放大縮小，只要將M11--M22放大或縮小對應倍數就行了，不過現在的寬屏看著有誤差啊。

上述內容就是如何將一個DIV旋轉的某一角度即90度/180度/270度及放大等問題，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。