基本原理：
- 1.首先我们需要让图片能旋转的效果，我们让所有图片绝对定位(position:absolute),共用一个中心点。
- 2.对于舞台我们加一个视距，比如下面的demo是 perspective: 800px;
- 3.对于容器 我们可以加一个3D视图 transform-style: preserve-3d;
- 4. 对于图片旋转，我们要使用在旋转 rotateY,但是一圈是360度，而图片共九张，因此每一张的图片旋转的角度是40度；
- 因此我们可以在css下这样写代码：
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 ); }
由于共用一个中心点，所以我们可以看下如下图效果：
在3维空间中，想象一下:如果我们将每一张图片拉开到合适位置，是否就可以组成一个正九边形？
原本全部集中在中心点，拉开到九边形边上，其移动的距离及时图中的r的距离。
如何计算这个距离：
使用Math库中的tan正切函数。因为知道一条边及三个角的角度，所以：
r = 64/Math.tan(20/180 * Math.PI)
实例：
HTML:
1 <div class="d-rotate"> 2 <h3>3d旋转效果--点击任意图片浏览</h3> 3 <div id="stage" class="d_stage_area"> 4 <div id="container" class="container"> 5 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg" width="128" height="96" id="img1"/> 6 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg" width="128" height="96" id="img2"/> 7 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg" width="128" height="96" id="img3"/> 8 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg" width="128" height="96" id="img4"/> 9 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010350285-1813069804.jpg" width="128" height="96" id="img5"/> 10 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010410801-943411344.jpg" width="128" height="96" id="img6"/> 11 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010430395-1452487381.jpg" width="128" height="96" id="img7"/> 12 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010447332-2127426646.jpg" width="128" height="96" id="img8"/> 13 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010506613-1828415192.jpg" width="128" height="96" id="img8"/> 14 </div> 15 </div> 16 </div>