1.所有的3D变换都是基于这张图的
2.三个变换
rotateX( angle )
rotateY( angle )
rotateZ( angle )
3.perspective属性
CSS3 3D transform的透视点是在浏览器的前方！
或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！
4.translateZ帮你寻找透视位置
比如，父元素设置
perspective: 201px;
则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。
4.perspective属性的两种书写
perspective
属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例：
.stage {
perspective: 600px;
}
另一种
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！
5.视点位置perspective-origin
6.transform-style: preserve-3d
transform-style属性也是3D效果中经常使用的，其两个参数flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。
7.backface-visibility
在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素
backface-visibility:hidden;
8.demo
CSS3 transform实现图片旋转木马3D浏览效果实例页面
(1)html结构
舞台
容器
图片
图片
图片
...
（2）对于舞台，很简单，加个视距，比方说800像素：
perspective: 800px;
（3）对于容器，很简单，加个3D视图声明，如下：
transform-style: preserve-3d;
（4）为了不至于产生类似DNA的螺旋状效果，我们让所有图片position:absolute，公用同一个中心点。
因为要正好绕成一个圈，因此，图片rotateY
值正好0~360等分，于是，如果有9张图片，则每个图片的旋转角度累加40(360 / 9 = 40)度即可。因此有
img:nth-child(1) { transform: rotateY( 0deg ); }
img:nth-child(2) { transform: rotateY( 40deg ); }
img:nth-child(3) { transform: rotateY( 80deg ); }
img:nth-child(4) { transform: rotateY( 120deg ); }
img:nth-child(5) { transform: rotateY( 160deg ); }
img:nth-child(6) { transform: rotateY( 200deg ); }
img:nth-child(7) { transform: rotateY( 240deg ); }
img:nth-child(8) { transform: rotateY( 280deg ); }
img:nth-child(9) { transform: rotateY( 320deg ); }
聪明的人应该已经知道了，就是本文提到的translateZ, 当translateZ为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来！！
：9个美女，分别面朝东南西北共9个不同方位，她们只要每个人向前走个45步，美女们之间的空间不久拉开了，呈现圆形了！想象一下夜空中，礼花绽开的场景~
计算公式
r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8
demo页面为了好看，图片之间留了点间距，使用的translateZ
的值为175.8 + 20 = 195.8
.
