transform介紹
可控制css元素的位移及旋轉狀態，可單獨使用，也可與perspective透視一起使用。
以下介紹下transform的屬性及function
屬性
transform: 應用transform不同的屬性。其值可為：
1、perspective
若是父元素應用了透視perspective xx px, 子元素的transform屬性值可為perspective(yy px), yy值越小，則焦距越小，呈現的效果就是類似廣角的效果，若值越大，則焦距越遠，元素看起來就像在遠處一樣，一般yy小于xx值，過大的yy值沒有太大區別。
2、translate3d(x,y,z)
定義一個3d的旋轉變化，是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三軸的旋轉程度，值為正，表示順時針轉，值為負，表示逆時針轉
7、rotateX(angle), rotateY(angle), rotateZ(angle)
分別沿x,y,z軸方向的旋轉角度，此外還有skew，傾斜角度，設置類似，比較少用
其他屬性
通常在要對多個子元素進行transform透視設置時，會先用一個父元素將子元素包住，父元素類似鏡頭，父元素上設置perspective滅點的值，類似焦距，一般設置為500-1000px左右。此外還可在父元素上設置以下屬性：
1、transform-style屬性，值為flat或perspective-3d，前者表示2d顯示子元素，后者為3D透視表示子元素。
2、perspective-origin: 設置視角的位置，值可為xx% yy%或center,left等，距左邊和上面多少距離。類似調整攝像機的位置，從哪個角度拍。注意區別子元素的transform-origin--調整子元素位移參考點或旋轉軸位置。
應用
1、實現夢幻星空效果
@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、輪播-旋轉木馬
