天跟大家分享一個很很酷6的一個網站前端小技術，

打開網頁編輯軟件，新建一個HTML網頁，然后在body里寫下如圖代碼

然后添加css3樣式代碼如圖

添加好后點擊鍵盤上的ctrl+s保存，保存路徑隨意

歡迎大家轉載收藏，有需要源碼的朋友可以關注我后私聊我，還可以加咱們的交流群：309073798

最后有不好的地方歡迎在留言區吐槽

現3d效果旋轉跳躍的立方體，CSS3中具有的perspective就是為了設置井深，創建一個3D的環境，而transform-style就是為了創建3d環境。

井深：指視覺與平面的距離，使具有三維位置變換的元素產生透視效果，就是我們理解的【Z軸】。 從視覺上觀察，值越大看起來距自己越近，元素整體越大；值越小，越遠，元素整體越小。在設計中給需要3D的盒子的父級設置井深，讓其具有立體透視效果 ，通常perspective使用的值800px或者1200px ，這兩個值從視覺上看比較舒服，也可以根據需求自行設置。

首先，需要創建一個大盒子div將立方體包裹起來，以便在css樣式中固定六個面的位置：

1. 
   
2. <div class="wrap">
3. <div class="cube">
4. <div class="front">前</div>
5. <div class="back">后</div>
6. <div class="left">左</div>
7. <div class="right">右</div>
8. <div class="top">上</div>
9. <div class="bottom">下</div>
10. </div>
11. </div>

在CSS中添加相關的樣式如下：

1. 
   
2. * {
3. padding: 0px;
4. margin: 0px;
5. }