transform介紹
可控制css元素的位移及旋轉(zhuǎn)狀態(tài)，可單獨使用粗卜，也可與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)
定義一個3d的旋轉(zhuǎn)變化统屈，是translateX(x), translateY(y), translateZ(z)的縮寫
3、translateX(x), translateY(y), translateZ(z)
沿x,y,z軸方向移動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)程度吨掌，值為正，表示順時針轉(zhuǎn)脓恕，值為負(fù)膜宋，表示逆時針轉(zhuǎn)
7、rotateX(angle), rotateY(angle), rotateZ(angle)
分別沿x,y,z軸方向的旋轉(zhuǎn)角度炼幔，此外還有skew兜辞，傾斜角度，設(shè)置類似米诉，比較少用
其他屬性
通常在要對多個子元素進(jìn)行transform透視設(shè)置時藤肢，會先用一個父元素將子元素包住，父元素類似鏡頭跺讯，父元素上設(shè)置perspective滅點的值枢贿，類似焦距，一般設(shè)置為500-1000px左右刀脏。此外還可在父元素上設(shè)置以下屬性：
1局荚、transform-style屬性，值為flat或perspective-3d愈污，前者表示2d顯示子元素耀态，后者為3D透視表示子元素。
2暂雹、perspective-origin: 設(shè)置視角的位置首装，值可為xx% yy%或center,left等，距左邊和上面多少距離擎析。類似調(diào)整攝像機的位置簿盅，從哪個角度拍。注意區(qū)別子元素的transform-origin--調(diào)整子元素位移參考點或旋轉(zhuǎn)軸位置揍魂。
應(yīng)用
1桨醋、實現(xiàn)夢幻星空效果
@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)木馬
