transform:使用transform功能實(shí)現(xiàn)四種文字或圖像的變形處理,分別是旋轉(zhuǎn)、縮放、斜切以及移動(dòng)。
none: 無(wú)轉(zhuǎn)換
matrix(<number>,<number>,<number>,<number>,<number>,<number>): 以一個(gè)含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換,相當(dāng)于直接應(yīng)用一個(gè)[a,b,c,d,e,f]變換矩陣
translate(<length>[, <length>]):
移動(dòng),水平方向的移動(dòng)和垂直方向的移動(dòng)-mo-transform:translate(20px,10px).只用一個(gè)值的話,只指在水平方向的移動(dòng)。
指定對(duì)象的2D translation(2D平移)。第一個(gè)參數(shù)對(duì)應(yīng)X軸,第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供,則默認(rèn)值為0
translateX(<length>): 指定對(duì)象X軸(水平方向)的平移
translateY(<length>): 指定對(duì)象Y軸(垂直方向)的平移
rotate(<angle>):
-webkit-transform:rotate(45deg);使用rotate,在參數(shù)中加入角度值,角度值后面跟著表示角度單位的“deg”文字即可,旋轉(zhuǎn)方向?yàn)轫槙r(shí)針旋轉(zhuǎn)。
指定對(duì)象的2D rotation(2D旋轉(zhuǎn)),需先有transform-origin屬性的定義
scale(<number>[, <number>]):
-webkit-transform:scale(0.5)使該元素縮小了50%
-webkit-transform:scale(0.5,2)使該元素水平方向縮小了50%,垂直方向放大一倍
指定對(duì)象的2D scale(2D縮放)。第一個(gè)參數(shù)對(duì)應(yīng)X軸,第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供,則默認(rèn)取第一個(gè)參數(shù)的值
scaleX(<number>): 指定對(duì)象X軸的(水平方向)縮放
scaleY(<number>): 指定對(duì)象Y軸的(垂直方向)縮放
skew(<angle> [, <angle>]):傾斜
-webkit-transform:skew(30deg)水平方向傾斜角度30deg
-webkit-transform:skew(30deg,30deg)使該元素水平方向縮小了50%,垂直方向放大一倍
指定對(duì)象skew transformation(斜切扭曲)。
第一個(gè)參數(shù)對(duì)應(yīng)X軸,第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供,則默認(rèn)值為0
skewX(<angle>): 指定對(duì)象X軸的(水平方向)扭曲
skewY(<angle>): 指定對(duì)象Y軸的(垂直方向)扭曲