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>

View Code

 

 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 ); }

View Code

 

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         })();

View Code

 

效果圖：

 點擊查看在線demo演示