CSS transform, perspective属性

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、实现梦幻星空效果

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、轮播-旋转木马

carousel.png