標籤：bsp jpg 實現 toc style photo 它的 感受 概念
中秋主題的3D旋轉相簿
，這是通過Javascript和css3來實現的。整個案例只有不到80行代碼，我希望通過這個案例，讓正處於迷茫期的js初學者感受到學習的樂趣。我會儘可能講得詳細，不需要你對css和js有多麼高深的理解，你也可以跟著一步步做出來。如果你是為了討女票開心，那麼也完全可以把圖片換成對方的照片，在某個特別的時刻給對方一個驚喜哦 ~
css3的強大使得網頁的展示變得空前得豐富起來，再配合簡單的js代碼，就可以實現這個效果。好了，話不多說，讓我們開始吧。
1. 頁面模板<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>中秋節快樂</title> <style> </style> </head> <body> </body> <script> </script></html>** 1.1 ** ：這句話的含義是，設定網頁編碼為utf-8，確保中文可以正常顯示。
1.2. ：設定網頁的標題。
就是它：
1.3. ： 在style裡面可以編寫css樣式，所謂的css就是相當於給dom元素披上了一層美麗的外衣。
1.4. ： 在body地區裡面添加dom元素，也就是一個網頁的主題架構。比如div，p，a標籤等，就是放在這個部分的。
1.5. ：這是js指令碼地區，單純的說，就是為了動態地控制body地區裡面的標籤元素。之所以放在body的下面，是為了保證瀏覽器先把所有的dom元素都渲染完畢，才進行js操作。
2.調背景色在style塊裡面給整個頁面渲染成黑色調
*{padding:0px;margin:0px;} /*這是為了消除預設dom元素的內外邊距，使得我們寫css的時候更精確*/body{background:#000;}順便提一下，#FFF肯定就是純白色了。
在本案例中，我們將背景色設定為純黑色。
3.製作3D相框我們我們畫一個id為photos的div作為相框來裝載所有的圖片。
<div id="photos"></div>這句話一寫，頁面上啥也沒有，div連寬度和高度都沒有，這個時候，我們就要用css來給div添加一件美麗的外衣了。
#photos{ width:110px; /*寬度*/ height:180px; /*高度*/ border:1px solid #ccc; /*加一個灰色邊框*/ margin:160px auto; /*水平置中，高度距離頂部100px*/}這樣還是平面的效果，沒有3D的感覺，如果你不相信，我們可以用transform屬性讓它沿著Y軸起來，看看是不是3D的。
transform:rotateY(0deg);這句話表示將div盒子沿著Y軸旋轉0度。
讓我們用Google瀏覽器開啟（或者其他瀏覽器，不要太老就行），開啟偵錯模式（大部分瀏覽器都是直接按一下F12就可以了），進入這樣的介面。
按一下這裡的箭頭，就可以查看dom元素了。
把滑鼠滑到div上，點擊。
然後右邊就會出來這樣的介面，裡面有這個div所有的樣式。
我們找到 transform:rotateY(0deg); 這一行，然後可以動態地改變它的值，我們點幾下，選中 0deg 這幾個字，再按鍵盤上的向上箭頭，就會這樣：
哇，轉起來了，好神奇！
我當初知道有這麼個名堂的時候，心裡就特別興奮。
這還是2D的，沒有3D效果，如何添加3D效果呢?
我們加上這兩個屬性，
transform-style:preserve-3d;/*設定3d環境*/perspective:800px; /*設定景深為800px*/所謂的景深， 簡單說來，就是對好焦的範圍。它能決定是把背景模糊化來突出拍攝對象，還是拍出清晰的背景。我看到網上是這麼說的，喜歡攝影的朋友應該很瞭解。
為了突出效果，我們添加一張圖片，順便給圖片加上一點倒影效果。
<div id="photos"> <img src="img/1.jpg" /></div>#photos img{ width:100%; height:100%; position:absolute; box-shadow:0 0 8px #eaeaea; box-shadow: 1px -1px 6px #666; border-radius:4px; -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5)); cursor:pointer;}效果：
看起來有點效果了吧。
我一共準備了8張圖片，現在將剩餘的圖片也添加進來。
<div id="photos"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /></div>到目前為止，所有的圖片都是疊在一起的，我們思考如何將他們分散開來，圍城一圈呢?
4.將圖片散開，圍成一圈在3維座標中，不僅有X軸，Y軸，還有Z軸。我們首先要明白Z軸是什麼概念，Y軸是左右旋轉，上面已經示範過了，不難想到X軸應該就是上下旋轉，那麼Z軸呢？
我們先把倒影去掉，看起來清楚些。
/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/好，讓我們來一探究竟：
哇，原來如此！
Z軸就是垂直於橫切面的一條軸！
我們現在不需要繞著Z軸旋轉，試試讓相簿沿著Z軸移動一段距離如何?
translateZ可以幫我們實現這一個效果。
回到正題。
我們的目的是讓所有的圖片分散開來，那麼第一步就是讓每一張圖片均勻地根據Y軸轉過一個角度。這個角度是多少呢？
一圈是360度，除以圖片的張數，就是每一張圖片轉過的角度了。
我們用js來實現：
var photosDom = document.getElementById(‘photos‘);//擷取圖片數組var images = photosDom.getElementsByTagName(‘img‘); //擷取圖片數量var len = images.length; //計算每張圖片按Y軸旋轉的角度 var deg = Math.floor(360 / len); for(var i = 0; i < len;i++){ images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg)‘; //deg前面不要加空格}代碼是比較明了的，就是一個除法運算，然後給每一張圖片增加一個旋轉樣式即可。
效果：
可見，每一張圖片都轉過了一定的角度。
也就是說，這個時候，每張圖片的Z軸都不一樣了！
如果你還是覺得有難度，沒關係，我們拿其中一張圖片來舉例，讓它沿著它自己的Z軸向外移動。然後你就明白了。
for(var i = 0; i < len;i++){ images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg)‘; //deg前面不要加空格 if(i == 1){ images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) translateZ(300px)‘; }}顯而易見了，就是這麼回事，那麼解決方案自己就出來了，我們只需要在每一張圖片根據Y軸旋轉的時候，就讓它沿著Z軸“飄”出來就可以啦！
距離稍微大一點，就380px吧。
for(var i = 0; i < len;i++){ images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) translateZ(380px)‘; //deg前面不要加空格}這樣有點太水平了，我們讓整個相簿往下一點，達到一種稍微有點俯視的效果。讓相簿根據X軸往下移動個10px就可以了哦。
transform:rotateX(-10deg);這樣效果就出來了。
5.繪製透明酷炫底盤本案例中，在相簿底部，還有一個透明的底盤，現在我們開始實現這個效果。
<div id="photos"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> <div></div></div>其實，它就是一個放在photos裡面的div。我們通過定位布局和css3特性就可以實現了。
上代碼：
#photos div{ width:1200px; height:1200px; border-radius:50%; position:absolute; top:102%; left:50%; margin-left:-600px; margin-top:-600px; transform:rotateX(90deg); background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));}top屬性是一點點調出來的，你也可以用瀏覽器的偵錯模式一點點來調整高度。
效果：
6.自動旋轉最後一步，還是由js代碼來收尾，我們使用js的定時器setInterval，每隔30毫秒就讓整個相簿轉過一個非常小的角度就行了。
var x = 0;setInterval(function(){ photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)";},30);代碼應該還是比較明了的。
最終效果就出來了：
今天做了一點小修改，我把photos的margin由之前的100px auto變為160px auto了。
從效果來看，相簿在旋轉的過程中，會有一定的位移，雖然我個人覺得這樣的效果也挺有趣的，不過，如果你不希望它的位置發生位移的話，只需要在photos外邊在逃一層div，然後把景深移到外層div就ok啦。
示範地址：http://s-335245.gotocdn.com:8080/demo.html?path=3d
GJM ：JS + CSS3 打造炫酷3D相簿
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
