如圖，這是通過Javascript和css3來實現(xiàn)的。整個案例只有不到80行代碼，我希望通過這個案例，讓正處于迷茫期的js初學(xué)者感受到學(xué)習(xí)的樂趣。我會盡可能講得" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 三分鐘學(xué)會用 js + css3 打造酷炫3D相冊

三分鐘學(xué)會用 js + css3 打造酷炫3D相冊

時間：2023-07-26 12:21:01 | 來源：網(wǎng)站運營

時間：2023-07-26 12:21:01 來源：網(wǎng)站運營

三分鐘學(xué)會用 js + css3 打造酷炫3D相冊：中秋主題的3D旋轉(zhuǎn)相冊




如圖，這是通過Javascript和css3來實現(xiàn)的。整個案例只有不到80行代碼，我希望通過這個案例，讓正處于迷茫期的js初學(xué)者感受到學(xué)習(xí)的樂趣。我會盡可能講得詳細(xì)，不需要你對css和js有多么高深的理解，你也可以跟著一步步做出來。如果你是為了討女票開心，那么也完全可以把圖片換成對方的照片，在某個特別的時刻給對方一個驚喜哦 ~

css3的強大使得網(wǎng)頁的展示變得空前得豐富起來，再配合簡單的js代碼，就可以實現(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元素都渲染完畢，才進行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就可以了），進入這樣的界面。

按一下這里的箭頭，就可以查看dom元素了。





把鼠標(biāo)滑到div上，點擊。





然后右邊就會出來這樣的界面，里面有這個div所有的樣式。





我們找到 transform:rotateY(0deg); 這一行，然后可以動態(tài)地改變它的值，我們點幾下，選中 0deg 這幾個字，再按鍵盤上的向上箭頭，就會這樣：







哇，轉(zhuǎn)起來了，好神奇！

我當(dāng)初知道有這么個名堂的時候，心里就特別興奮。

這還是2D的，沒有3D效果，如何添加3D效果呢?

我們加上這兩個屬性，

transform-style:preserve-3d;/*設(shè)置3d環(huán)境*/perspective:800px; /*設(shè)置景深為800px*/所謂的景深， 簡單說來，就是對好焦的范圍。它能決定是把背景模糊化來突出拍攝對象，還是拍出清晰的背景。我看到網(wǎng)上是這么說的，喜歡攝影的朋友應(yīng)該很了解。

為了突出效果，我們添加一張圖片，順便給圖片加上一點倒影效果。

<div id="photos"> <img src="1.jpg"></img></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;}效果：







看起來有點效果了吧。

我一共準(zhǔn)備了8張圖片，現(xiàn)在將剩余的圖片也添加進來。

<div id="photos"> <img src="1.jpg"></img> <img src="2.jpg"></img> <img src="3.jpg"></img> <img src="4.jpg"></img> <img src="5.jpg"></img> <img src="6.jpg"></img> <img src="7.jpg"></img> <img src="8.jpg"></img></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可以幫我們實現(xiàn)這一個效果。

回到正題。

我們的目的是讓所有的圖片分散開來，那么第一步就是讓每一張圖片均勻地根據(jù)Y軸轉(zhuǎn)過一個角度。這個角度是多少呢？

一圈是360度，除以圖片的張數(shù)，就是每一張圖片轉(zhuǎn)過的角度了。

我們用js來實現(xiàn)：

var photosDom = document.getElementById('photos');//獲取圖片數(shù)組var images = photosDom.getElementsByTagName('img'); //獲取圖片數(shù)量var len = images.length; //計算每張圖片按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前面不要加空格}代碼是比較明了的，就是一個除法運算，然后給每一張圖片增加一個旋轉(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軸“飄”出來就可以啦！

距離稍微大一點，就380px吧。

for(var i = 0; i < len;i++){ images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格}





這樣有點太水平了，我們讓整個相冊往下一點，達(dá)到一種稍微有點俯視的效果。讓相冊根據(jù)X軸往下移動個10px就可以了哦。

transform:rotateX(-10deg);





這樣效果就出來了。

5.繪制透明酷炫底盤

本案例中，在相冊底部，還有一個透明的底盤，現(xiàn)在我們開始實現(xiàn)這個效果。

<div id="photos"> <img src="1.jpg"></img> <img src="2.jpg"></img> <img src="3.jpg"></img> <img src="4.jpg"></img> <img src="5.jpg"></img> <img src="6.jpg"></img> <img src="7.jpg"></img> <img src="8.jpg"></img> <div></div></div>其實，它就是一個放在photos里面的div。我們通過定位布局和css3特性就可以實現(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ào)出來的，你也可以用瀏覽器的調(diào)試模式一點點來調(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)該還是比較明了的。

最終效果就出來了：









今天做了一點小修改，我把photos的margin由之前的100px auto變?yōu)?60px auto了。

從效果來看，相冊在旋轉(zhuǎn)的過程中，會有一定的偏移，雖然我個人覺得這樣的效果也挺有趣的，不過，如果你不希望它的位置發(fā)生偏移的話，只需要在photos外邊在逃一層div，然后把景深移到外層div就ok啦。

免責(zé)聲明： 博客中所有的圖片素材均來自百度搜索，僅供學(xué)習(xí)交流，如有問題請聯(lián)系我，侵立刪，謝謝。




（注：個別圖片大于5M無法上傳，可點擊下方鏈接查看原文）

作者： 剽悍一小兔
鏈接：http://www.imooc.com/article/22632
來源：慕課網(wǎng)


關(guān)鍵詞：打造,相冊,學(xué)會

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉