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

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

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

div class=”wrap” div class=”cube” div class=”front”前/div div class=”back”后/div div class=”left”左/div div class=”right”右/div div class=”top”上/div div class=”bottom”下/div /div /div在CSS中添加有關的樣式如下：

* { padding: 0px; margin: 0px;}.wrap{ margin-top: 200px; margin-left: 500px; /*設置井深、透視*/ perspective: 800px; /*視覺來源,透視效果*/ perspective-origin: 50% 100px;}.cube{ position: relative; width: 200px; /*創建3d環境*/ transform-style: preserve-3d;}.cube div{ position: absolute; width: 200px; height: 200px; /*添加內陰影*/ box-shadow: 5px 5px 50px plum inset; border: 1px gainsboro solid;} /*旋轉設置立方體的六個面*/.front { transform: translateZ(100px);}.back { transform: translateZ(-100px) rotateY(180deg);}.right { transform: rotateY(-270deg) translateX(100px); /*變化元素地點*/ transform-origin: top right;}.left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left;}.top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center;}.bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;}演示靜態效果：

在CSS樣式中添加動態效果：

/*幀動作漫畫,旋轉角度*/@keyframes spin { from { transform:rotateX(0) rotateY(0) rotateZ(0) ; } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }} /*旋轉速度*/.cube { animation: spin 10s infinite linear;}