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)的效果就是類似廣角的效果，若值越大，則焦距越遠，元素看起來就像在遠處一樣，一般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)，值為負，表示逆時針轉(zhuǎn)

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

其他屬性

通常在要對多個子元素進行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)夢幻星空效果

dawn.png

@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)木馬

carousel.png