css3d-perspective

1.transform-style

该属性有两个值，一个是flat,一个是perspective-3d,前者是默认值，代表是平面渲染，没有3d的效果，后者恰好相反，要使用3d效果，需要设置改属性为后者

2.perspective

该属性定义了到z=0的距离，默认是0或者none，此时没有3d的效果，需要大于0才能看到效果，请参考下图

Paste_Image.png

perspective的值就是焦点到z=0那条竖线的距离

3.perspective-origin

该属性是用来定义视角的x位置和y位置，参考下图

Paste_Image.png

简单理解，就是用来定义图中眼睛的位置，默认是50%，50%，即当前dom的中心位置

4.坐标轴

注意看坐标轴，这是没有任何旋转时坐标轴的标识，+x右，-x左，+y上，-y下，+z前，-z后，假如元素执行了rotateX（90reg），即在x轴顺时针旋转了90度，此时，y轴变成了-z轴，z轴变成了轴

Paste_Image.png

5.Demo

理解了上面的几个概念之后，可以开始做demo了

demo.gif

截图可能有问题，不管了，直接上代码,完整代码请拉到最后

style部分

.wrap{
    position: relative;
    margin: 300px 0 0 300px;
    perspective: 800px;
    width: 200px;
    height: 200px;
  }
  .container {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: all 2s;
  }
  
  .face {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 200px;
    font-size: 50px;
    color: #fff;
    border: 1px solid #ccc;
    opacity: .3;
    background: #999;
  }
  
  .f1 {
     transform: rotateX(90deg) translateZ(100px);
  }
  
  .f2 {
    transform: translateZ(-100px);
  }
  
  .f3 {
    transform: rotateX(90deg) translateZ(-100px);
  }
  
  .f4 {
    transform: translateZ(100px);
  }
  
  .f5 {
    transform: rotateY(90deg) translateZ(100px);
  }
  
  .f6 {
    transform: rotateY(90deg) translateZ(-100px);
  }

wrap，核心的属性是perspective：800px这句，代表离z=0的距离是800px

container,有一个transition的动画定义

一个正方体，是由6块面构成，这边的是face就是对每个面进行同样的定义，比较简单
f1-f6就是单独对每一块的定义了，都是位移和旋转，此处不全部解释，只解释一条（参考4），其余相同道理

 .f1 {
     transform: rotateX(90deg) translateZ(100px);
  }

这一段代码，代表该块先在X轴顺时针旋转90度，可以想象，此时y轴变成了-z,z变成了y,然后再向z轴前方位移100px，即往本来的y轴方向位移了100px，即向上位移了100px。从这个来看，定义的顺序很重要，下一个要执行的变换是基于上一个执行的变换之后坐标轴的

全部代码请猛戳

参考文档

https://blog.pfan123.com/2016/10/26/CSS3D-Transform-style%E5%92%8CPerspective%E5%B1%9E%E6%80%A7/
http://acgtofe.com/posts/2015/12/xyz-3d-in-css