css3中transform相容ie 傾斜div

2021-06-20 16:31:42 字數 1135 閱讀 4900

(引用qq)

transform:rotate(-30deg);/*相容性強*/

-ms-transform:rotate(-30deg);/*ie9*/

-o-tranform:rotate(-30deg);/*opera*/

-webkit-transform:rotate(-30deg);/*chrome safria*/

-moz-transform:rotate(-30deg); /*firefox*/

filter: progid:dximagetransform.microsoft.matrix(sizingmethod='auto expand', m11=0.866025404, m12=0.5, m21=-0.5, m22=0.866025404) ;

筆記:matrix 濾鏡在旋轉方面需要用到 m11 m12 m21 m22 四個引數,分別代表 cos(旋轉的角度)、-sin(旋轉的角度)、sin(旋轉的角度)、cos(旋轉的角度)。但這裡需要注意的是 ie 中旋轉的中心點會發生變化。

css  filter : progid:dximagetransform.microsoft.matrix ( enabled=benabled , sizingmethod=smethod , filtertype=stype , dx=fdx , dy=fdy , m11=fm11 , m12=fm12 , m21=fm21 , m22=fm22 ) 

scripting  object.style.filter = "progid:dximagetransform.microsoft.matrix ( sproperties ) " 

說明:使用矩陣變形實現物件內容的改變尺寸、旋轉、上下或左右反轉。

使用此濾鏡可以建立下列效果:

7. 左右反轉。將 m11 和 m12 的值取負。 

8. 上下反轉。將 m21 和 m22 的值取負。 

9. 改變尺寸。將 m11 和 m12 和 m21 和 m22 的值乘以相同的因數。物件內容尺寸會按比例增大或縮小。 

使用 padding 屬性能夠使最終影象邊角被剪下的機會降到最小。 

示例:#iddiv

#iddiv

例項一 講解

這是乙個css旋轉屬性的演示

例項二 應用

">

css3中的變形(transform)

transform 字面上的意思就是 使改變外觀 改變形態 在css3中transform主要包括以下幾種 1.旋轉 rotate 2.傾斜 skew 3.縮放 scale 4.移動 translate 語法transform none transform rotate skew scale tra...

css3中的transform方法

transform屬性應用於元素的2d或3d轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。translate transform的乙個方法 通過 translate 方法,元素從其當前位置移動,根據給定的 left x 座標 和 top y 座標 位置引數 用法transform transl...

css3的transform中scale縮放詳解

下面我們從3個方面開始介紹 1 scale x,y 對元素進行縮放 x表示水平方向縮放的倍數 y表示垂直方向的縮放倍數 y是乙個可選引數,沒有設定的話,則表示x,y兩個方向的縮放倍數是一樣的。並以x為準。transform scale 2,2.5 2 scalex 元素只在x軸 水平方向 縮放元素。...