(引用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軸 水平方向 縮放元素。...