中秋節(jié)馬上就要到來了，這是一個很有意義的節(jié)日，意味這團(tuán)圓和美滿。
為此，我也特別準(zhǔn)備了一個案例
中秋主題的3D旋轉(zhuǎn)相冊
如圖，這是通過Javascript和css3來實(shí)現(xiàn)的。整個案例只有不到80行代碼，我希望通過這個案例，讓正處于迷茫期的js初學(xué)者感受到學(xué)習(xí)的樂趣。我會盡可能講得詳細(xì)，不需要你對css和js有多么高深的理解，你也可以跟著一步步做出來。如果你是為了討女票開心，那么也完全可以把圖片換成對方的照片，在某個特別的時刻給對方一個驚喜哦 ~
css3的強(qiáng)大使得網(wǎng)頁的展示變得空前得豐富起來，再配合簡單的js代碼，就可以實(shí)現(xiàn)這個效果。好了，話不多說，讓我們開始吧。
1. 頁面模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>中秋節(jié)快樂</title>
<style>
</style>
</head>
<body>
</body>
<script>
</script>
</html>
** 1.1 <meta charset="UTF-8" />** ：這句話的含義是，設(shè)置網(wǎng)頁編碼為utf-8，確保中文可以正常顯示。
1.2.<title>中秋節(jié)快樂</title> ：設(shè)置網(wǎng)頁的標(biāo)題。
就是它：
1.3.<style> </style> ： 在style里面可以編寫css樣式，所謂的css就是相當(dāng)于給dom元素披上了一層美麗的外衣。
1.4.<body> </body> ： 在body區(qū)域里面添加dom元素，也就是一個網(wǎng)頁的主題框架。比如div，p，a標(biāo)簽等，就是放在這個部分的。
1.5.<script> </script> ：這是js腳本區(qū)域，單純的說，就是為了動態(tài)地控制body區(qū)域里面的標(biāo)簽元素。之所以放在body的下面，是為了保證瀏覽器先把所有的dom元素都渲染完畢，才進(jìn)行js操作。
2.調(diào)背景色
在style塊里面給整個頁面渲染成黑色調(diào)
*{padding:0px;margin:0px;} /*這是為了消除默認(rèn)dom元素的內(nèi)外邊距，使得我們寫css的時候更精確*/
body{background:#000;}
#######000是純黑色
#######F00是純紅色
#######0F0是純綠色
#######00F是純藍(lán)色
順便提一下，#FFF肯定就是純白色了。
在本案例中，我們將背景色設(shè)置為純黑色。
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軸旋轉(zhuǎn)0度。
讓我們用谷歌瀏覽器打開（或者其他瀏覽器，不要太老就行），打開調(diào)試模式（大部分瀏覽器都是直接按一下F12就可以了），進(jìn)入這樣的界面。
按一下這里的箭頭，就可以查看dom元素了。
把鼠標(biāo)滑到div上，點(diǎn)擊。
然后右邊就會出來這樣的界面，里面有這個div所有的樣式。
我們找到 transform:rotateY(0deg); 這一行，然后可以動態(tài)地改變它的值，我們點(diǎn)幾下，選中 0deg 這幾個字，再按鍵盤上的向上箭頭，就會這樣：
哇，轉(zhuǎn)起來了，好神奇！
我當(dāng)初知道有這么個名堂的時候，心里就特別興奮。
這還是2D的，沒有3D效果，如何添加3D效果呢?
我們加上這兩個屬性，
transform-style:preserve-3d;/*設(shè)置3d環(huán)境*/
perspective:800px; /*設(shè)置景深為800px*/
所謂的景深， 簡單說來，就是對好焦的范圍。它能決定是把背景模糊化來突出拍攝對象，還是拍出清晰的背景。我看到網(wǎng)上是這么說的，喜歡攝影的朋友應(yīng)該很了解。
為了突出效果，我們添加一張圖片，順便給圖片加上一點(diǎn)倒影效果。
<div id="photos">
</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;
}
效果：
看起來有點(diǎn)效果了吧。
我一共準(zhǔn)備了8張圖片，現(xiàn)在將剩余的圖片也添加進(jìn)來。
<div id="photos">
</div>
到目前為止，所有的圖片都是疊在一起的，我們思考如何將他們分散開來，圍城一圈呢?
4.將圖片散開，圍成一圈
在3維坐標(biāo)中，不僅有X軸，Y軸，還有Z軸。我們首先要明白Z軸是什么概念，Y軸是左右旋轉(zhuǎn)，上面已經(jīng)演示過了，不難想到X軸應(yīng)該就是上下旋轉(zhuǎn)，那么Z軸呢？
我們先把倒影去掉，看起來清楚些。
/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/
好，讓我們來一探究竟：
哇，原來如此！
Z軸就是垂直于橫切面的一條軸！
我們現(xiàn)在不需要繞著Z軸旋轉(zhuǎn)，試試讓相冊沿著Z軸移動一段距離如何?
translateZ可以幫我們實(shí)現(xiàn)這一個效果。
回到正題。
我們的目的是讓所有的圖片分散開來，那么第一步就是讓每一張圖片均勻地根據(jù)Y軸轉(zhuǎn)過一個角度。這個角度是多少呢？
一圈是360度，除以圖片的張數(shù)，就是每一張圖片轉(zhuǎn)過的角度了。
我們用js來實(shí)現(xiàn)：
var photosDom = document.getElementById('photos');
//獲取圖片數(shù)組
var images = photosDom.getElementsByTagName('img');
//獲取圖片數(shù)量
var len = images.length;
//計(jì)算每張圖片按Y軸旋轉(zhuǎn)的角度
var deg = Math.floor(360 / len);
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
}
代碼是比較明了的，就是一個除法運(yùn)算，然后給每一張圖片增加一個旋轉(zhuǎn)樣式即可。
效果：
可見，每一張圖片都轉(zhuǎn)過了一定的角度。
也就是說，這個時候，每張圖片的Z軸都不一樣了！
如果你還是覺得有難度，沒關(guān)系，我們拿其中一張圖片來舉例，讓它沿著它自己的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)';
}
}
顯而易見了，就是這么回事，那么解決方案自己就出來了，我們只需要在每一張圖片根據(jù)Y軸旋轉(zhuǎn)的時候，就讓它沿著Z軸“飄”出來就可以啦！
距離稍微大一點(diǎn)，就380px吧。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}
這樣有點(diǎn)太水平了，我們讓整個相冊往下一點(diǎn)，達(dá)到一種稍微有點(diǎn)俯視的效果。讓相冊根據(jù)X軸往下移動個10px就可以了哦。
transform:rotateX(-10deg);
這樣效果就出來了。
5.繪制透明酷炫底盤
本案例中，在相冊底部，還有一個透明的底盤，現(xiàn)在我們開始實(shí)現(xiàn)這個效果。
<div id="photos">
<div></div>
</div>
其實(shí)，它就是一個放在photos里面的div。我們通過定位布局和css3特性就可以實(shí)現(xiàn)了。
上代碼：
#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屬性是一點(diǎn)點(diǎn)調(diào)出來的，你也可以用瀏覽器的調(diào)試模式一點(diǎn)點(diǎn)來調(diào)整高度。
效果：
6.自動旋轉(zhuǎn)
最后一步，還是由js代碼來收尾，我們使用js的定時器setInterval，每隔30毫秒就讓整個相冊轉(zhuǎn)過一個非常小的角度就行了。
var x = 0;
setInterval(function(){
photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)";
},30);
代碼應(yīng)該還是比較明了的。
最終效果就出來了：
今天做了一點(diǎn)小修改，我把photos的margin由之前的100px auto變?yōu)?60px auto了。
從效果來看，相冊在旋轉(zhuǎn)的過程中，會有一定的偏移，雖然我個人覺得這樣的效果也挺有趣的，不過，如果你不希望它的位置發(fā)生偏移的話，只需要在photos外邊在逃一層div，然后把景深移到外層div就ok啦。
本章結(jié)束 ...
剽悍一小兔，電氣自動化畢業(yè)。
參加工作后對計(jì)算機(jī)感興趣，深知初學(xué)編程之艱辛。
希望將自己所學(xué)記錄下來，給初學(xué)者一點(diǎn)幫助。
最后，也預(yù)祝大家中秋節(jié)快樂，家庭幸福，美滿。
