之前發過該文，后來不知怎么回事不見了，現在重新發一下。
中秋主題的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;}
000是純黑色
F00是純紅色
0F0是純綠色
00F是純藍色
順便提一下，#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度。
讓我們用谷歌瀏覽器打開（或者其他瀏覽器，不要太老就行），打開調試模式（大部分瀏覽器都是直接按一下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/demo.html?path=3d
我的個人博客：www.xiaotublog.com
免責聲明： 博客中所有的圖片素材均來自百度搜索，僅供學習交流，如有問題請聯系我，侵立刪，謝謝。