為了賬號安全,請及時綁定郵箱和手機立即綁定

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

2018.01.10 10:31 13594瀏覽

中秋主題的3D旋轉相冊
Paste_Image.png

如圖,這是通過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 <meta charset="UTF-8" /> :這句話的含義是,設置網頁編碼為utf-8,確保中文可以正常顯示。

1.2.<title>中秋節快樂</title> :設置網頁的標題。

就是它:
Paste_Image.png

1.3.<style> </style> : 在style里面可以編寫css樣式,所謂的css就是相當于給dom元素披上了一層美麗的外衣。

1.4.<body> </body> : 在body區域里面添加dom元素,也就是一個網頁的主題框架。比如div,p,a標簽等,就是放在這個部分的。

1.5.<script> </script> :這是js腳本區域,單純的說,就是為了動態地控制body區域里面的標簽元素。之所以放在body的下面,是為了保證瀏覽器先把所有的dom元素都渲染完畢,才進行js操作。

2.調背景色

在style塊里面給整個頁面渲染成黑色調

*{padding:0px;margin:0px;} /*這是為了消除默認dom元素的內外邊距,使得我們寫css的時候更精確*/
body{background:#000;}

#######000是純黑色
Paste_Image.png
#######F00是純紅色
Paste_Image.png
#######0F0是純綠色
Paste_Image.png
#######00F是純藍色
Paste_Image.png

順便提一下,#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*/
}

Paste_Image.png

這樣還是平面的效果,沒有3D的感覺,如果你不相信,我們可以用transform屬性讓它沿著Y軸起來,看看是不是3D的。

transform:rotateY(0deg);

這句話表示將div盒子沿著Y軸旋轉0度。

讓我們用谷歌瀏覽器打開(或者其他瀏覽器,不要太老就行),打開調試模式(大部分瀏覽器都是直接按一下F12就可以了),進入這樣的界面。

按一下這里的箭頭,就可以查看dom元素了。
Paste_Image.png

把鼠標滑到div上,點擊。
Paste_Image.png

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

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

rotate.gif

哇,轉起來了,好神奇!

我當初知道有這么個名堂的時候,心里就特別興奮。

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

我們加上這兩個屬性,

transform-style:preserve-3d;/*設置3d環境*/
perspective:800px;      /*設置景深為800px*/

所謂的景深, 簡單說來,就是對好焦的范圍。它能決定是把背景模糊化來突出拍攝對象,還是拍出清晰的背景。我看到網上是這么說的,喜歡攝影的朋友應該很了解。

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

<div id="photos">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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;
}

效果:

rotate.gif

看起來有點效果了吧。

我一共準備了8張圖片,現在將剩余的圖片也添加進來。

<div id="photos">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="6.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="7.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="8.jpg"></img>

</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));*/

好,讓我們來一探究竟:

rotate.gif

哇,原來如此!

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前面不要加空格
}

代碼是比較明了的,就是一個除法運算,然后給每一張圖片增加一個旋轉樣式即可。

效果:

Paste_Image.png

可見,每一張圖片都轉過了一定的角度。

也就是說,這個時候,每張圖片的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)';
    }
}

Paste_Image.png

顯而易見了,就是這么回事,那么解決方案自己就出來了,我們只需要在每一張圖片根據Y軸旋轉的時候,就讓它沿著Z軸“飄”出來就可以啦!

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

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

Paste_Image.png

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

transform:rotateX(-10deg);

Paste_Image.png

這樣效果就出來了。

5.繪制透明酷炫底盤

本案例中,在相冊底部,還有一個透明的底盤,現在我們開始實現這個效果。

<div id="photos">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="2.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="3.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="4.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="5.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="6.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="7.jpg"></img>
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="8.jpg"></img>
    <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屬性是一點點調出來的,你也可以用瀏覽器的調試模式一點點來調整高度。

效果:

Paste_Image.png

6.自動旋轉

最后一步,還是由js代碼來收尾,我們使用js的定時器setInterval,每隔30毫秒就讓整個相冊轉過一個非常小的角度就行了。

var x = 0;
setInterval(function(){
    photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)";
},30);

代碼應該還是比較明了的。

最終效果就出來了:

rotate.gif

今天做了一點小修改,我把photos的margin由之前的100px auto變為160px auto了。

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

免責聲明: 博客中所有的圖片素材均來自百度搜索,僅供學習交流,如有問題請聯系我,侵立刪,謝謝。

點擊查看更多內容

本文原創發布于慕課網 ,轉載請注明出處,謝謝合作

53人點贊

若覺得本文不錯,就分享一下吧!

評論

相關文章推薦

正在加載中
意見反饋 幫助中心 APP下載
官方微信

舉報

0/150
提交
取消
lpl竞猜