1. 三维坐标系

• x轴：水平向右（右边是正，左边是负）
• y轴：垂直向下（向下是正，向上是负）

• z轴：垂直屏幕（向外是正，向里是负）

  2. 3D转换

  3D转换中最常用的是3D位移和3D旋转。主要知识点如下：
• 3D位移：transform:translate3d(x,y,z)
• 3D旋转：rotate3d(x,y,z)
• 透视：perspective

• 3D呈现：transform-style

2.1 3D移动translate3d

语法：

• transform:translateX(100px);//仅仅在X轴上移动
• transform:translateY(100px);//仅仅在Y轴上移动
• transform:translateZ(100px);//仅仅在Z轴上移动，注意：在Z轴上移动的单位一般用px
• transform:translate3d(x,y,z);//x,y,z都不可以省略，如果没有就写0

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /*这样写会导致transform: translateX(100px);被覆盖*/
    transform: translateX(100px);
    transform: translateY(100px);
}

修改成以下形式就没有问题

transform: translateX(100px) translateY(100px);

或者

transform: translate3d(100px,100px,0);

同时translateZ(100px)需要借助于透视才可以看到效果，以下写法是看不到效果的

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    transform: translateX(100px) translateY(100px) translateZ(100px);
}

2.2 透视perspective

• 3D物体投影在2D平面内
• 模拟人类视觉位置：安排一只眼睛去看
• 透视也称为视距d：人眼到屏幕的距离
• 距离视觉点越近，在电脑上的成像越大，越远成像越小。
• 透视的单位是像素
  注意：透视d写在被观察元素的父盒子上面

2.3 translateZ