學習 CSS 之用 CSS 3D 實現炫酷效果

2020 年 3 月 18 日
筆記

一、前言

　　把大象關進冰箱需要幾步？三步，把冰箱門打開，把大象關進去，把冰箱門關上。

　　用 CSS 實現 3D 效果需幾步？三步，設置透視效果 perspective，改變元素載體為 preserve-3d，對元素進行 3D 轉換操作。

　　perspective 屬性決定了我們從什麼地方查看元素，定義時的 perspective 屬性，它是一個元素的子元素，透視圖，而不是元素本身。

　　再說 3D 轉換操作，需要用到的就是 translateX，translateY，translateZ，寫到一塊就是 translate-3d，除此之外還有 rotateX，rotateY，rotateZ。至於平移和旋轉的方向，可以參考下面的三維坐標圖：

二、CSS 翻頁效果

1.創建透視背景

　　首先是要創建一個透視背景，也就是一個具有 perspective 屬性的 div，這裡我給 perspective 的值為800個像素單位。除此之外，還要有一個 div，將所有頁面都包括在這個 div 中，這個 div 需要設置 position 為 relative，因為後面的頁面都要使用絕對定位，並且要設置 transform-style 屬性為 preserve-3d。相關 CSS 程式碼如下：

 1 .back {   2     perspective: 800px;   3     perspective-origin: 50% 50%;   4     overflow: hidden;   5     margin: 10px;   6 }   7   8 .content {   9     width: 400px;  10     height: 400px;  11     margin: 0 auto;  12     transform-style: preserve-3d;  13     position: relative;  14 }

2.創建頁面

　　在 CSS 類為 content 的 div 中創建多個頁面，將除了第一頁以外的頁面全都“放倒”，即以底邊為變換中心，然後在 X 方向上旋轉90度，CSS 程式碼如下：

transform-origin: bottom;

transform: rotateX(90deg);

　　除此之外，還要設置 transition 屬性，頁面的 CSS 程式碼如下：

 1 .page {   2     width: 360px;   3     height: 360px;   4     padding: 20px;   5     background-color: black;   6     color: white;   7     font-weight: bold;   8     font-size: 300px;   9     text-align: center;  10     position: absolute;  11 }  12  13 #p1 {  14     transform-origin: bottom;  15     transition: transform 1s linear;  16 }  17  18 #p2,  19 #p3,  20 #p4,  21 #p5,  22 #p6 {  23     transform-origin: bottom;  24     transition: transform 1s linear;  25     transform: rotateX(90deg);  26 }

3.添加按鈕實現翻頁

　　添加兩個按鈕用於實現向前翻頁和向後翻頁。向前翻頁時，當前頁面在 X 方向上旋轉-90度，也就是向前旋轉90度倒下了，然後將下一頁改為 rotate(0deg) 立起來。向後翻頁就是一個逆向的過程了，這裡就不再贅述了。控制翻頁的 JS 程式碼如下：

 1 <script>   2     var curIndex = 1;   3   4     function previous() {   5         console.log(curIndex);   6         if (curIndex === 1) {   7             return   8         }   9         var curPage = document.getElementById("p" + curIndex);  10         curPage.style.transform = "rotateX(90deg)";  11  12         curIndex--;  13         var prevPage = document.getElementById("p" + curIndex);  14         prevPage.style.transform = "rotateX(0deg)";  15     }  16  17     function next() {  18         console.log(curIndex);  19         if (curIndex === 6) {  20             return  21         }  22         var curPage = document.getElementById("p" + curIndex);  23         curPage.style.transform = "rotateX(-90deg)";  24  25         curIndex++;  26         var nextPage = document.getElementById("p" + curIndex);  27         nextPage.style.transform = "rotateX(0deg)";  28     }  29 </script>

　　需要注意的是，在向前和向後翻頁時，需要對第一頁和最後一頁進行一個判斷。

三、CSS 旋轉正方體

1.創建正方體

　　用 CSS 創建一個旋轉的正方體，首先也是要創建一個透視的背景，然後創建六個頁面，分別進行平移和旋轉操作，構造出一個正方體，CSS 程式碼如下：

 1 .face {   2     width: 160px;   3     height: 160px;   4     padding: 20px;   5     color: white;   6     position: absolute;   7     transition: transform 1s linear;   8 }   9  10 #f1 {  11     background-color: aqua;  12 }  13  14 #f2 {  15     background-color: blue;  16     transform-origin: right;  17     transform: rotateY(-90deg)  18 }  19  20 #f3 {  21     background-color: green;  22     transform-origin: top;  23     transform: rotateX(-90deg)  24 }  25  26 #f4 {  27     background-color: yellow;  28     transform-origin: bottom;  29     transform: rotateX(90deg)  30 }  31  32 #f5 {  33     background-color: red;  34     transform-origin: left;  35     transform: rotateY(90deg)  36 }  37  38 #f6 {  39     background-color: pink;  40     transform: translateZ(-200px);  41 }

2.旋轉正方體

　　進行完第一步之後，一個正方體就已經出來了，但是我們還只能看到兩個面，這時可以對整體進行一下旋轉，就能看到更多的面了。JS 程式碼如下：

1 <script>  2     setInterval(function() {  3         for (var i = 1; i < 361; i++) {  4             var ele = document.getElementById("content");  5             ele.style.transform = "rotate(" + i + "deg)";  6         }  7     }, 1000)  8 </script>

完整程式碼已上傳到 GitHub！