亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2013-12-19 16:15:57   作者：佚名   我要評論
將一個DIV旋轉(zhuǎn)的某一角度，任意角度，90度，放大等等問題~ 經(jīng)搜索發(fā)現(xiàn)這個解決問題思路，雖然不完全算前端問題，還是記錄下來，說不定對誰有幫助

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

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

實際使用發(fā)現(xiàn)，你放在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哪里來的？

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

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

相關(guān)文章

  • 如何實現(xiàn)div 圖片在DIV內(nèi)水平居中

    本文介紹了div 圖片如何在DIV內(nèi)水平居中，無論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實現(xiàn)，一般推薦使用CSS進行，但網(wǎng)頁多時候，我們只需要修改CSS文件
    2021-11-30

  • DIV CSS實現(xiàn)網(wǎng)頁背景半透明效果

    DIV半透明實現(xiàn)，使用CSS實現(xiàn)DIV成半透明效果，CSS實現(xiàn)層與背景半透明效果。本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
    2021-11-30

  • 解析div與span區(qū)別與用法

    新手在使用web標準（div css）開發(fā)網(wǎng)頁的時候，遇到第一個問題是div與span有什么區(qū)別，什么時候用div，什么時候用span標簽。下面小編就通過本文給大家講解下，感興趣的朋友
    2021-11-30

  • 設(shè)置div背景透明的方法示例

    這篇文章主要介紹了設(shè)置div背景透明的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2021-02-20

  • CSS實現(xiàn)div不設(shè)高度完全居中

    這篇文章主要介紹了CSS實現(xiàn)div不設(shè)高度完全居中，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2021-02-04

  • div自適應(yīng)高度自動填充剩余高度

    這篇文章主要介紹了div自適應(yīng)高度自動填充剩余高度,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
    2020-07-08

  • 詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實現(xiàn)方法

    這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實現(xiàn)方法,需要的朋友可以參考下
    2018-11-15

  • DIV或者DIV里面的圖片水平與垂直居中的方法

    這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下
    2018-11-15

  • 詳解如何用div實現(xiàn)自制滾動條

    這篇文章主要介紹了詳解如何用div實現(xiàn)自制滾動條,滾動條是瀏覽器中最常見的組件了。想要學習如何自制滾動條的方法，需要了解的朋友可以參考下
    2018-03-21

  • div對齊與網(wǎng)頁布局詳解

    Div布局是學習的重點，這篇文章主要為大家詳細介紹了div對齊與網(wǎng)頁布局的相關(guān)學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-08-31

最新評論