css3 變換 transform(2D)

1、transform變換

　　可作拉伸、壓縮、旋轉、偏移的效果。需加各個瀏覽器前綴。

2、transform-origin

　　爲transform屬性值的基點，默認值爲元素的中心位置，即以元素左上角爲座標軸原點，向右爲x軸，向下爲y軸，基點爲(50%,50%)。

　　1. transform-origin:x y z;

　　　　1）x軸 取值：left/center/right/length/%

　　　　　　百分比換算：

　　　　　　　　　　　　left-------------0%

　　　　　　　　　　　　center----------50%

　　　　　　　　　　　　right------------100%

　　　　2）y軸 取值：top/center/bottom/length/%

　　　　　　百分比換算：

　　　　　　　　　　　　top--------------0%

　　　　　　　　　　　　center----------50%

　　　　　　　　　　　　right------------100%

　　　　3）z軸 取值：length

　　　　　　2D默認爲0,3D效果設置。

3、transform的屬性值

　　1.旋轉 rotate(deg)

　　　　經過指定的角度參數對元素以基點進行2D旋轉。單位爲deg。

　　2.移動 translate(x,y)

　　　　始終相對於元素中心偏移。單位爲px。

　　　　translateX(x);水平方向上的偏移量

　　　　translateY(y);垂直方向上的偏移量

　　3.縮放 scale(x,y)

　　　　當值=1爲原大小；值>1爲放大；值<1爲縮小。單位無。

　　　　scaleX(x);水平方向上的縮放

　　　　scaleY(y);垂直方向上的縮放

　　4.傾斜 skew(x,y)

　　　　給選定的元素進行以基點爲中心的傾斜。單位爲deg。

　　　　skewX(x);水平方向上的傾斜

　　　　skewY(y);垂直方向上的傾斜

　　5.矩陣 matrix(rotateX,rotateY,rotate3D,translateZ,translate3D,scaleZ,scale3D)

　　　　矩陣一共有6個參數。