transform介紹

可控制css元素的位移及旋轉(zhuǎn)狀態(tài)，可單獨(dú)使用，也可與perspective透視一起使用。

以下介紹下transform的屬性及function

屬性

transform: 應(yīng)用transform不同的屬性。其值可為：

1、perspective

若是父元素應(yīng)用了透視perspective xx px, 子元素的transform屬性值可為perspective(yy px), yy值越小，則焦距越小，呈現(xiàn)的效果就是類似廣角的效果，若值越大，則焦距越遠(yuǎn)，元素看起來就像在遠(yuǎn)處一樣，一般yy小于xx值，過大的yy值沒有太大區(qū)別。

2、translate3d(x,y,z)

定義一個(gè)3d的旋轉(zhuǎn)變化，是translateX(x),? translateY(y), translateZ(z)的縮寫

3、translateX(x),? translateY(y), translateZ(z)

沿x,y,z軸方向移動(dòng)x,y,z的距離

4、scale3d(x,y,z)

定義x,y,z三維的大小變形

5、scaleX(x), scaleY(y), scaleZ(z)

分別沿x,y,z軸方向的尺寸變形，放大或縮寫

6、rotate3d(x,y,z,angle)

定義沿x,y,z三軸的旋轉(zhuǎn)程度，值為正，表示順時(shí)針轉(zhuǎn)，值為負(fù)，表示逆時(shí)針轉(zhuǎn)

7、rotateX(angle), rotateY(angle), rotateZ(angle)

分別沿x,y,z軸方向的旋轉(zhuǎn)角度，此外還有skew，傾斜角度，設(shè)置類似，比較少用

其他屬性

通常在要對(duì)多個(gè)子元素進(jìn)行transform透視設(shè)置時(shí)，會(huì)先用一個(gè)父元素將子元素包住，父元素類似鏡頭，父元素上設(shè)置perspective滅點(diǎn)的值，類似焦距，一般設(shè)置為500-1000px左右。此外還可在父元素上設(shè)置以下屬性：

1、transform-style屬性，值為flat或perspective-3d，前者表示2d顯示子元素，后者為3D透視表示子元素。

2、perspective-origin: 設(shè)置視角的位置，值可為xx% yy%或center,left等，距左邊和上面多少距離。類似調(diào)整攝像機(jī)的位置，從哪個(gè)角度拍。注意區(qū)別子元素的transform-origin--調(diào)整子元素位移參考點(diǎn)或旋轉(zhuǎn)軸位置。

應(yīng)用

1、實(shí)現(xiàn)夢(mèng)幻星空效果

@keyframes rotate{ 0%{ transform:perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); } 100%{ transform:perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); } } .stars{ transform:perspective(500px); transform-style:preserve-3d; position:absolute; bottom:0; perspective-origin:50% 100%; left:50%; animation:rotate 90s infinite linear; } .star{ width:2px; height:2px; background:#F7F7B6; //border-radius:100%; position:absolute; top:0; left:0; transform-origin:0 0 -300px; transform:translate3d(0,0,-300px); backface-visibility:hidden; }

2、輪播-旋轉(zhuǎn)木馬