实现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;}