我们生活的环境是3D的，它的特点是近大远小，物体后面的东西会被遮挡。我们可以使用CSS3来制作3D视觉效果。1.3D运动——我们在translate3d之前学过的运动是二维的（2D变换transform——元素位移、旋转、缩放），3D运动是在此基础上多了一个方向的运动，即Z轴。/*在Z轴上向外移动100px（朝向我们的眼睛）*/transform:translateZ(100px);/*在X、Y、Z轴上分别移动100px、50px、100px*/transform:translate3d(100px,50px,100px);需要注意的是，X轴和Y轴的移动距离可以以像素或百分比为单位，但Z轴的移动距离通常以像素为单位。2.Perspective——perspective我们发现上面的样式虽然使用了translate3d，但是还是有二维的效果。如果要产生3D效果，则需要透视。即模拟人的视觉位置。透视也称为观看距离。观看距离是人眼到屏幕的距离。距离越近，图像越大，距离越远，图像越小。透视写在被观察元素的父框上。视角：300px；现在盒子移动后看起来变大了，因为我们在Z轴方向向我们移动了100px，所以近的边大了，远的边小了。试着把盒子移远一点，你会看到盒子变小了：/*在Z轴上移动100px（向屏幕方向移动）*/transform:translate3d(100px,50px,-100px);3.3D旋转——rotate3d三维旋转允许元素在三维平面中沿x轴、y轴、z轴或自定义轴旋转。关于元素旋转的方向，大家可以记住左手定则：左手大拇指指向x/y/z的正方向，其余手指弯曲的方向就是元素旋转（正值）。/*沿x轴正方向旋转45度*/transform:rotateX(45deg);/*沿y轴正方向旋转45度*/transform:rotateY(45deg);/*沿z轴度数的正方向旋转45度（其实就是之前的rotate）*/transform:rotateZ(45deg);/*沿自定义轴旋转，x,y,z代表旋转轴的向量，表示是否要沿此轴旋转*/transform:rotate3d(x,y,z,deg);/*沿x轴旋转45度*/transform:rotate3d(1,0,0,45deg);/*沿x,y轴的对角线旋转45度*/transform:rotate3d(1,1,0,45deg);4、3D呈现——transform-styletransform-style控制子元素是否开启三维环境。需要写入父框，子框才能呈现3D效果。/*子元素不启用3d立体空间，默认值*/transform-style:flat;/*子元素启用立体空间*/transform-style:preserve-3d;
