CSS3旋轉跳躍的立方體

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

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

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

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中添加相關的樣式如下：

2. * {
3. padding: 0px;
4. margin: 0px;
5. }
6. .wrap{
7. margin-top: 200px;
8. margin-left: 500px;
9. /*設置井深、透視*/
10. perspective: 800px;
11. /*視覺來源,透視效果*/
12. perspective-origin: 50% 100px;
13. }
14. .cube{
15. position: relative;
16. width: 200px;
17. /*創建3d環境*/
18. transform-style: preserve-3d;
19. }
20. .cube div{
21. position: absolute;
22. width: 200px;
23. height: 200px;
24. /*添加內陰影*/
25. box-shadow: 5px 5px 50px plum inset;
26. border: 1px gainsboro solid;
27. }
28. /*旋轉設置立方體的六個面*/
29. .front {
30. transform: translateZ(100px);
31. }
32. .back {
33. transform: translateZ(-100px) rotateY(180deg);
34. }
35. .right {
36. transform: rotateY(-270deg) translateX(100px);
37. /*改變元素位置*/
38. transform-origin: top right;
39. }
40. .left {
41. transform: rotateY(270deg) translateX(-100px);
42. transform-origin: center left;
43. }
44. .top {
45. transform: rotateX(-90deg) translateY(-100px);
46. transform-origin: top center;
47. }
48. .bottom {
49. transform: rotateX(90deg) translateY(100px);
50. transform-origin: bottom center;
51. }

演示靜態效果：

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

2. /*幀動畫,旋轉角度*/
3. @keyframes spin {
4. from { transform:rotateX(0) rotateY(0) rotateZ(0) ; }
5. to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
6. }
7. /*旋轉速度*/
8. .cube {
9. animation: spin 10s infinite linear;
10. }

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！