css3基础知识点--transform 3D变换坐标系、perspective透视距离

在学习CSS3 3D 变换前我们有必要学习下坐标系，不然各种角度让人觉得很头疼。数学课本中的三维坐标系是右手坐标系，而计算机中的左手坐标系使用较多。

1、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图：

2、CSS3中的3D坐标系

CSS3中的3D坐标系与上面的左手坐标系有一定区别的，相当于其绕着X轴旋转了180度。就变成这样了

3、如何判断旋转角度：左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向（顺时针方向）。

总结：XYZ轴的正方向分别是：右、下、屏幕外，让轴正向对着自己，顺时针方向就是该轴旋转的方向。

4、透视 perspective

perspective 视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。这个是美术透视的概念，感觉有点懵。。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

比较通用的距离是设置为800px

perspective有两种写法

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

.class{
  perspective: 800px;
}
.class{
  transform: prespective(800px)
}

用translateZ做一个实验吧

translateZ（）定义 3D 转化，仅使用用于 Z 轴的值。

实验的本意是鼠标移到里面盒子的时候，视觉上盒子向屏幕外（Z轴）移动1000px,有放大效果。但在未设置透视距离的时候，没有任何效果。去掉注释后的效果：