CSS3：3D移动translate3d及3D转换透视效果perspective

3D移动translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是轴方向。

• transform:translateX(100px);仅在x轴上移动。
• transform:translateY(100px);仅在y轴上移动。
• transform:translateZ(100px);仅在z轴上移动(单位一般都用px，不用百分比)。
• transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离。

.box1 {
        width: 200px;
        height: 200px;
        background-color: aqua;
        transform: translate3d(100px,100px,100px);
}

3D转换透视效果perspective
如果想要在网页产生3D效果需要用到透视（可以理解成3D物体投影在2D平面内）；
透视我们也成为视距，视距就是人的眼睛到屏幕的距离；
距离视觉点越近的电脑平面成像越大，越远成像越小；
透视的单位是像素。

注意点：
透视是写在被观察元素的父盒子上面的

body {
 /*透视写到被观察元素的父盒子上 透视越大(视距变大)盒子越小，透视越小(视距变小)盒子越大*/
       perspective: 1000px;
 }
.box1 {
        width: 200px;
        height: 200px;
        background-color: aqua;
        transform: translate3d(300px,100px,100px);
}