9.15日音訊，首創(chuàng)網(wǎng)絡(luò)談CSS中transform屬性。通過transform，可以讓元素進行移動（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）。如果該屬性有一個非none值,將會產(chǎn)生一個層疊上下文.在這種情況下對象將作為它包含的position:fixed元素的包含塊（acontainingblock）。

　　1.移動：translate

　　一個值：transform:translate(100px)

　　表示水平方向移動的位移，等同于translateX(100px)

　　translateX(x):沿X軸位移

　　translateY(y):沿Y軸位移

　　translateZ(z):沿Z軸位移

　　兩個值：transform:translate(100px,200px)

　　第一個表示水平方向移動的位移，第二個表示垂直方向移動的位移

　　translate(x,y):沿XY軸位移

　　三個值：translate3d(10px,20px,10px)

　　表示3D三個方向移動的位移，順序為X,Y,Z

　　2.旋轉(zhuǎn)：transform:rotate(ndeg)(其中n為旋轉(zhuǎn)度數(shù))

　　以角度(deg)為單位，正數(shù)是順時針旋轉(zhuǎn)，負數(shù)是逆時針旋轉(zhuǎn)

　　rotate():2D旋轉(zhuǎn)

　　rotateX():沿著X軸3D旋轉(zhuǎn)

　　rotateY():沿著Y軸3D旋轉(zhuǎn)

　　rotateZ():沿著Z軸3D旋轉(zhuǎn).要在其父級配合transform-style:preserve-3d;使用

　　rotate3D(x,y,z,ndeg):3D旋轉(zhuǎn)，接受四個參數(shù)，x,y,z介于0-1之間，n是旋轉(zhuǎn)的度數(shù)。元素圍繞著xyz在空間中確定的唯一坐標(biāo)點和原點之間的連線旋轉(zhuǎn)指定的角度，這就是rotate3D。

　　3.縮放：scale

　　一個值：transform:scale(1)

　　表示水平跟垂直方向同時放大1倍

　　兩個值：transform:scale(1,2)

　　第一個參數(shù)表示水平方向的縮放比例，第二個參數(shù)表示垂直方向的縮放比例,

　　等同于scaleX(1)和scaleY(2)

　　三個值：scale3d(0.5,0.3,0.4)

　　表示3D三個方向縮放的比例，順序為X,Y,Z軸

　　數(shù)值為負時為縮小

　　4.傾斜：skew

　　一個值：transform:skew(10deg)

　　表示水平方向的傾斜角度，等同于skewX(10deg)

　　skewX:表示水平方向的傾斜角度

　　skewY：表示垂直方向的傾斜角度

　　兩個值：transform:skew(10deg,20deg)

　　第一個參數(shù)表示水平方向的傾斜角度，第二個參數(shù)表示垂直方向的傾斜角度

　　5.元素的基點：transform-origin:10px20px

　　值得注意的是:在進行以上的變形操作時，默認都是以元素的中心為基點.

　　要想改變基點則可以使用transform-origin屬性

　　有兩個參數(shù)：第一個表示距離元素左上角水平方向的距離，第二個表示距離元素左上角垂直方向的距離。

　　第一個參數(shù)可以設(shè)置為left、center、right，第二個參數(shù)可以設(shè)置為top、center、bottom。

　　6.合寫:transform:rotate(45deg)scale(1)skew(40deg,30deg)translate(100px200px)