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

　　1.移動(dòng)：translate

　　一個(gè)值：transform:translate(100px)

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

　　translateX(x):沿X軸位移

　　translateY(y):沿Y軸位移

　　translateZ(z):沿Z軸位移

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

　　第一個(gè)表示水平方向移動(dòng)的位移，第二個(gè)表示垂直方向移動(dòng)的位移

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

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

　　表示3D三個(gè)方向移動(dòng)的位移，順序為X,Y,Z

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

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

　　rotate():2D旋轉

　　rotateX():沿著(zhù)X軸3D旋轉

　　rotateY():沿著(zhù)Y軸3D旋轉

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

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

　　3.縮放：scale

　　一個(gè)值：transform:scale(1)

　　表示水平跟垂直方向同時(shí)放大1倍

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

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

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

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

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

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

　　4.傾斜：skew

　　一個(gè)值：transform:skew(10deg)

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

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

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

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

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

　　5.元素的基點(diǎn)：transform-origin:10px20px

　　值得注意的是:在進(jìn)行以上的變形操作時(shí)，默認都是以元素的中心為基點(diǎn).

　　要想改變基點(diǎn)則可以使用transform-origin屬性

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

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

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