CSS3旋转跳跃的立方体

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

                                                                                                 元气少女，加油！