在学习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 轴的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box{
width: 300px;
height: 300px;
margin:50px auto;
border: 1px solid #ddd;
position: relative;
}
.test{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255,0,255,0.5);
left:0;
right: 0;
top:0;
bottom: 0;
margin:auto;
transition: all 500ms ease;
/*transform-style:preserve-3d;*/
/*transform: perspective(800px);*/
}
.test:hover{
transform:translateZ(1000px);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
实验的本意是鼠标移到里面盒子的时候，视觉上盒子向屏幕外（Z轴）移动1000px,有放大效果。但在未设置透视距离的时候，没有任何效果。去掉注释后的效果：
