中秋節(jié)馬上就要到來了，這是一個(gè)很有意義的節(jié)日挪略，意味這團(tuán)圓和美滿历帚。
為此，我也特別準(zhǔn)備了一個(gè)案例
中秋主題的3D旋轉(zhuǎn)相冊(cè)
如圖杠娱，這是通過Javascript和css3來實(shí)現(xiàn)的挽牢。整個(gè)案例只有不到80行代碼，我希望通過這個(gè)案例摊求，讓正處于迷茫期的js初學(xué)者感受到學(xué)習(xí)的樂趣禽拔。我會(huì)盡可能講得詳細(xì)，不需要你對(duì)css和js有多么高深的理解，你也可以跟著一步步做出來睹栖。如果你是為了討女票開心硫惕，那么也完全可以把圖片換成對(duì)方的照片，在某個(gè)特別的時(shí)刻給對(duì)方一個(gè)驚喜哦 ~
css3的強(qiáng)大使得網(wǎng)頁的展示變得空前得豐富起來野来，再配合簡(jiǎn)單的js代碼恼除，就可以實(shí)現(xiàn)這個(gè)效果。好了梁只，話不多說缚柳，讓我們開始吧。
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元素狗超，也就是一個(gè)網(wǎng)頁的主題框架弹澎。比如div，p努咐，a標(biāo)簽等苦蒿，就是放在這個(gè)部分的。
1.5.<script> </script> ：這是js腳本區(qū)域渗稍，單純的說佩迟，就是為了動(dòng)態(tài)地控制body區(qū)域里面的標(biāo)簽元素。之所以放在body的下面竿屹，是為了保證瀏覽器先把所有的dom元素都渲染完畢报强，才進(jìn)行js操作。
2.調(diào)背景色
在style塊里面給整個(gè)頁面渲染成黑色調(diào)
*{padding:0px;margin:0px;} /*這是為了消除默認(rèn)dom元素的內(nèi)外邊距拱燃，使得我們寫css的時(shí)候更精確*/
body{background:#000;}
#######000是純黑色
#######F00是純紅色
#######0F0是純綠色
#######00F是純藍(lán)色
順便提一下秉溉，#FFF肯定就是純白色了。
在本案例中碗誉，我們將背景色設(shè)置為純黑色召嘶。
3.制作3D相框
我們我們畫一個(gè)id為photos的div作為相框來裝載所有的圖片史简。
<div id="photos"></div>
這句話一寫夸溶，頁面上啥也沒有，div連寬度和高度都沒有稀并，這個(gè)時(shí)候蝴蜓，我們就要用css來給div添加一件美麗的外衣了碟绑。
#photos{
width:110px; /*寬度*/
height:180px; /*高度*/
border:1px solid #ccc; /*加一個(gè)灰色邊框*/
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)擊宽闲。
然后右邊就會(huì)出來這樣的界面众眨，里面有這個(gè)div所有的樣式。
我們找到 transform:rotateY(0deg); 這一行容诬，然后可以動(dòng)態(tài)地改變它的值娩梨，我們點(diǎn)幾下，選中 0deg 這幾個(gè)字览徒，再按鍵盤上的向上箭頭狈定，就會(huì)這樣：
哇，轉(zhuǎn)起來了习蓬，好神奇纽什！
我當(dāng)初知道有這么個(gè)名堂的時(shí)候，心里就特別興奮友雳。
這還是2D的稿湿，沒有3D效果铅匹，如何添加3D效果呢?
我們加上這兩個(gè)屬性押赊，
transform-style:preserve-3d;/*設(shè)置3d環(huán)境*/
perspective:800px; /*設(shè)置景深為800px*/
所謂的景深， 簡(jiǎn)單說來包斑，就是對(duì)好焦的范圍流礁。它能決定是把背景模糊化來突出拍攝對(duì)象，還是拍出清晰的背景罗丰。我看到網(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)深滚，試試讓相冊(cè)沿著Z軸移動(dòng)一段距離如何?
translateZ可以幫我們實(shí)現(xiàn)這一個(gè)效果奕谭。
回到正題。
我們的目的是讓所有的圖片分散開來痴荐，那么第一步就是讓每一張圖片均勻地根據(jù)Y軸轉(zhuǎn)過一個(gè)角度血柳。這個(gè)角度是多少呢？
一圈是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前面不要加空格
}
代碼是比較明了的鸦难，就是一個(gè)除法運(yùn)算根吁，然后給每一張圖片增加一個(gè)旋轉(zhuǎn)樣式即可。
效果：
可見合蔽，每一張圖片都轉(zhuǎn)過了一定的角度击敌。
也就是說，這個(gè)時(shí)候拴事，每張圖片的Z軸都不一樣了沃斤！
如果你還是覺得有難度圣蝎，沒關(guān)系，我們拿其中一張圖片來舉例衡瓶，讓它沿著它自己的Z軸向外移動(dòng)捅彻。然后你就明白了。
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)的時(shí)候诚撵，就讓它沿著Z軸“飄”出來就可以啦缭裆！
距離稍微大一點(diǎn)，就380px吧寿烟。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}
這樣有點(diǎn)太水平了澈驼，我們讓整個(gè)相冊(cè)往下一點(diǎn)，達(dá)到一種稍微有點(diǎn)俯視的效果筛武。讓相冊(cè)根據(jù)X軸往下移動(dòng)個(gè)10px就可以了哦缝其。
transform:rotateX(-10deg);
這樣效果就出來了。
5.繪制透明酷炫底盤
本案例中徘六，在相冊(cè)底部内边，還有一個(gè)透明的底盤，現(xiàn)在我們開始實(shí)現(xiàn)這個(gè)效果待锈。
<div id="photos">
<div></div>
</div>
其實(shí)漠其，它就是一個(gè)放在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.自動(dòng)旋轉(zhuǎn)
最后一步春瞬，還是由js代碼來收尾柴信，我們使用js的定時(shí)器setInterval，每隔30毫秒就讓整個(gè)相冊(cè)轉(zhuǎn)過一個(gè)非常小的角度就行了宽气。
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了抹竹。
從效果來看线罕，相冊(cè)在旋轉(zhuǎn)的過程中止潮，會(huì)有一定的偏移窃判，雖然我個(gè)人覺得這樣的效果也挺有趣的，不過喇闸，如果你不希望它的位置發(fā)生偏移的話袄琳，只需要在photos外邊在逃一層div询件，然后把景深移到外層div就ok啦。
本章結(jié)束 ...
剽悍一小兔唆樊，電氣自動(dòng)化畢業(yè)宛琅。
參加工作后對(duì)計(jì)算機(jī)感興趣，深知初學(xué)編程之艱辛逗旁。
希望將自己所學(xué)記錄下來嘿辟，給初學(xué)者一點(diǎn)幫助。
最后片效，也預(yù)祝大家中秋節(jié)快樂红伦，家庭幸福，美滿淀衣。
