58行程式碼實現3D相簿

Sameen_發表於2019-02-26
行程3D

前端初學者，目前是大三狗。
本專業不感興趣，所有自學前端打算轉行。
第一次寫文章，請各位大佬多多指教。

剛看完htmlt與css基礎部分，js還在學習中，做了一個小練習。

暫時沒有截gif的軟體，先用截圖代替吧。
效果圖就是這樣：

58行程式碼實現3D相簿

步驟：
1.構建立體均勻分佈的圖片
2.使圖片旋轉

使用到的知識點：
css部分：
1.transform
2.transform-style
3.perspective
4.transition
5.animation
js部分：
setInterval

transform屬性:

transform: none|transform-functions;
複製程式碼

Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

transform-style
transform–style屬性指定巢狀元素是怎樣在三維空間中呈現。

transform-style: flat|preserve-3d;
複製程式碼

這裡我們需要用到的是perserve-3d
使用這個屬性必需先使用transforn屬性

perspective
這個屬性是允許你改變3D檢視的透視方式。
值越大距離眼睛月圓，值越小距離眼睛越近。

transition
transition屬性是一個速記屬性有四個屬性：transition-property, transition-duration, transition-timing-function, and transition-delay

transition: property duration timing-function delay;
複製程式碼

  • transition-property 指定CSS屬性的name，transition效果

  • transition-duration transition效果需要指定多少秒或毫秒才能完成

  • transition-timing-function 指定transition效果的轉速曲線

  • transition-delay 定義transition效果開始的時候

animation
animation和transition這兩個屬性我覺得我講不清楚，大家還是自己去查一下吧。

首先定義一個div來存放圖片

<div class="wrap">
        <div id="photos">
            <img class="pic1" src="pic/3D/favorite1.jpg" alt="">
            <img class="pic2" src="pic/3D/favorite2.jpg" alt="">
            <img class="pic3" src="pic/3D/favorite3.jpg" alt="">
            <img class="pic4" src="pic/3D/favorite9.jpg" alt="">
            <img class="pic5" src="pic/3D/favorite5.jpg" alt="">
            <img class="pic6" src="pic/3D/favorite6.jpg" alt="">       
        </div>
</div>
複製程式碼

設定css

*{
         padding: 0px;
         margin: 0px;
     }   
     body{
         background-color: black;
     }
     .wrap{
         perspective: 1600px;
         
     }
     #photos{
         width: 300px;
         height:300px;
         margin: 200px auto;
         transform-style: preserve-3d;
         transition: all .5s ease;
         animation: spin 20s linear infinite;
         
     }
     img{
         width: 250px;
         height: 300px;
         margin-bottom: 100px;
         position: absolute;
         border: 1px solid gray;
         border-radius: 20px;
         opacity: 0.8;
     }
複製程式碼

此時圖片應該是都重疊在一起的，用js使圖片立體分佈均勻

首先 建立變數獲得photos物件
存放photo下的img
獲得img的長度

使圖片立體分佈均勻，這一步其實用css可以單獨設定，但是重複工作太多，所以直接用js即可。
遍歷phoNum，為其新增style
這裡的rotate指的是以螢幕為面。水平向右為X軸，豎直向上為y軸，垂直螢幕向外為z軸，所以我們只需要設定y軸的值，即trotateY()
注意：我們新增的圖片沒有上面和底下的 如果設定為上下面也有圖片，style需要單獨在cssh中設定。我嘗試新增了頂面，用js設定，但是沒搞出來，如果有哪位大佬知道怎麼弄，請指教。

var phoArr = document.getElementById("photos");
var phoNum = phoArr.getElementsByTagName("img");
var phoLen = phoNum.length;
var ang = Math.floor( 360/phoLen);
    for(var i = 0; i < phoLen; i++){
        phoNum[i].style = `transform : rotateY(` + ang*i + `deg) `;
    }
複製程式碼

此時應該是這樣的效果：

58行程式碼實現3D相簿

使圖片分散開，需要新增translateZ()，
這裡設定translateZ為300

for(var i = 0; i < phoLen; i++){
        phoNum[i].style = `transform : rotateY(` + ang*i + `deg) translateZ(300px) `;
    }
複製程式碼

這樣圖片就是均勻分散開的。

最後新增動畫使圖片動起來
使用@keyframes可以使圖片動起來。
它是通過通過從一個樣式過渡到另一個樣式

具體的用法有很多，不一一細說了。

這裡我只設定了水平方向的轉動，即只設定了rotateY()
從0到360deg，正好為一圈
若設定了rotateX()則在豎直方向也會轉動

@keyframes spin {
         from {
             transform: rotateY(0);
         }
         to {
             transform: rotateY(360deg);
         }
 }
複製程式碼

結束。

本文參考：

純css 3D立方體動畫特效
菜鳥教程css及js部分

相關文章