CSS3 实现3D旋转木马效果

基本原理：

• 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>

CSS:

 1 body {
 2     margin:100px;
 3     background-color:hsla(50,50%,40%,0.8);
 4 }
 5 .d-rotate {
 6     margin:10px;
 7 }
 8 .d-rotate h3 {
 9     text-align: center;
10     font-size: 1em;
11 }
12 .d_stage_area {
13     position:relative;
14     top: 0;
15     width:800px;
16     min-height: 100px;
17     padding: 100px;
18     background:#333;
19     -webkit-perspective:800px;
20     -moz-perspective: 800px;
21     perspective: 800px;
22     -webkit-transition: top .5s;
23 }
24 .d-rotate .container {
25     position: absolute;
26     left: 50%;
27     top:50%;
28     width:128px;
29     height:100px;
30     -webkit-transition: -webkit-transform 1s;
31     -moz-transition: -moz-transform 1s;
32     transition: transform 1s;
33
34     -webkit-transform-style: preserve-3d;
35     -moz-transform-style: preserve-3d;
36     transform-style: preserve-3d;
37 }
38 .d-rotate .container img {
39     position: absolute;
40     bottom: 0;
41     width:128px;
42     box-shadow: 0 1px 3px rgba(0,0,0,.5);
43     -webkit-transition: opacity 1s, -webkit-transform 1s;
44     -moz-transition: opacity 1s, -moz-transform 1s;
45     transition: opacity 1s, transform 1s;
46 }
47 .d-rotate img:nth-child(1) { transform: rotateY(   0deg ); }
48 .d-rotate img:nth-child(2) { transform: rotateY(  40deg ); }
49 .d-rotate img:nth-child(3) { transform: rotateY(  80deg ); }
50 .d-rotate img:nth-child(4) { transform: rotateY( 120deg ); }
51 .d-rotate img:nth-child(5) { transform: rotateY( 160deg ); }
52 .d-rotate img:nth-child(6) { transform: rotateY( 200deg ); }
53 .d-rotate img:nth-child(7) { transform: rotateY( 240deg ); }
54 .d-rotate img:nth-child(8) { transform: rotateY( 280deg ); }
55 .d-rotate img:nth-child(9) { transform: rotateY( 320deg ); }

JS:

 1 (function(){
 2             // css transform 变换
 3             var transform = function(element, value, key) {
 4                 key = key || "Transform";
 5                 ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
 6                     element.style[prefix + key] = value;
 7                 });
 8                 return element;
 9             };
10             var $ = function(selector) {
11                 return document.querySelector(selector);
12             };
13             // 获取元素
14             var eleStage = $("#stage"),
15                 container = $("#container");
16
17             var indexPiece = 0,
18                 htmlPic = ‘‘,
19                 arrayPic = [1, 2, 3, 4, 5, 6, 7, 8, 9],
20                 rotate = 360 / arrayPic.length;
21
22             arrayPic.forEach(function(i) {
23                 htmlPic = htmlPic + ‘<img id="img‘+ i +‘" src="./‘+ i +‘.jpg"/>‘;
24             });
25             container.innerHTML = htmlPic;
26
27
28             var transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);
29
30             //  添加事件监听器
31             container.addEventListener("click", function() {
32                 transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)");
33             });
34
35             arrayPic.forEach(function(i, j) {
36                 transform($("#img" + i), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ+15) +"px)");
37             });
38
39         })();

效果图：

点击查看在线demo演示