CSS3旋转跳跃的立方体

实现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. }
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样式中添加动态效果：

1. 
   
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. }