將一個(gè)DIV旋轉(zhuǎn)的某一角度即90度/180度/270度及放大等問(wèn)題
我要評(píng)論對(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)在的寬屏看著有誤差啊。
相關(guān)文章
如何實(shí)現(xiàn)div 圖片在DIV內(nèi)水平居中
本文介紹了div 圖片如何在DIV內(nèi)水平居中，無(wú)論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實(shí)現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁(yè)多時(shí)候，我們只需要修改CSS文件2021-11-30
DIV CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明效果
DIV半透明實(shí)現(xiàn)，使用CSS實(shí)現(xiàn)DIV成半透明效果，CSS實(shí)現(xiàn)層與背景半透明效果。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-11-30
新手在使用web標(biāo)準(zhǔn)（div css）開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候，遇到第一個(gè)問(wèn)題是div與span有什么區(qū)別，什么時(shí)候用div，什么時(shí)候用span標(biāo)簽。下面小編就通過(guò)本文給大家講解下，感興趣的朋友2021-11-30
這篇文章主要介紹了設(shè)置div背景透明的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-02-20
CSS實(shí)現(xiàn)div不設(shè)高度完全居中
這篇文章主要介紹了CSS實(shí)現(xiàn)div不設(shè)高度完全居中，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-02-04
這篇文章主要介紹了div自適應(yīng)高度自動(dòng)填充剩余高度,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-07-08詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-11-15- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條
這篇文章主要介紹了詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條,滾動(dòng)條是瀏覽器中最常見(jiàn)的組件了。想要學(xué)習(xí)如何自制滾動(dòng)條的方法，需要了解的朋友可以參考下2018-03-21- Div布局是學(xué)習(xí)的重點(diǎn)，這篇文章主要為大家詳細(xì)介紹了div對(duì)齊與網(wǎng)頁(yè)布局的相關(guān)學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-31
