9.15日音訊，首創(chuàng)網(wǎng)絡(luò)談CSS中transform屬性。通過transform，可以讓元素進(jìn)行移動(dòng)（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）。如果該屬性有一個(gè)非none值,將會(huì)產(chǎn)生一個(gè)層疊上下文.在這種情況下對(duì)象將作為它包含的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)的位移，順序?yàn)閄,Y,Z

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

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

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

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

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

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

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

　　3.縮放：scale

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

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

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

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

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

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

　　表示3D三個(gè)方向縮放的比例，順序?yàn)閄,Y,Z軸

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

　　4.傾斜：skew

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

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

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

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

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

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

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

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

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

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

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

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