、实际应用-图片的旋转木马效果
您可以狠狠地点击这里：图片的旋转木马效果demo
建议在足够新版本的FireFox浏览器或Safari浏览器下观看，Chrome可能需要居中定位查看，下图为效果缩略图：
原理：
那些看上去很酷酷的CSS3 3D效果其实就颠来倒去那几个属性（本文提到的这几个），折腾来折腾去，这里这个效果显然也是如此。
首先HTML结构，如下：
舞台
容器
图片
图片
图片
...
对于舞台，很简单，加个视距，比方说800像素：
perspective: 800px;
对于容器，很简单，加个3D视图声明，如下：
transform-style: preserve-3d;
然后就是图片们了。为了不至于产生类似DNA的螺旋状效果，我们让所有图片position:absolute，公用同一个中心点。
显然，图片旋转木马是类似钢管舞旋转的运动，因此，我们关心的是rotateY的大小。
因为要正好绕成一个圈，因此，图片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 ); }
这样就好了吗？
No, No, No!!!
想想看那，虽然9个绝色美女每个人的方位不一样，但都站在同一个点上，早就挤作一团，A罩都挤成C了，显然是不行的（见下图只设置rotateY）！我们需要拉开空间~~
如何拉开空间，很简单。
想想看那：9个美女，分别面朝东南西北共9个不同方位，她们只要每个人向前走个4~5步，美女们之间的空间不久拉开了，呈现圆形了！想象一下夜空中，礼花绽开的场景~~
这里的向前走4~5步，聪明的人应该已经知道了，就是本文提到的translateZ, 当translateZ为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来！！
现在只剩下一个问题了，美女们要向前走多远呢？？
这个距离是有计算公式滴！
拿本demo距离，每张美女图片的宽度是128像素，因此，有如下理想方位效果图：
上图中红色标注的r就是的demo页面中图片要translateZ的理想值（该值可以让所有图片无缝围成一个圆）！
r的计算很简单，有初中数学水平的人应该都会：
r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8
demo页面为了好看，图片之间留了点间距，使用的translateZ的值为175.8 + 20 = 195.8.
