CSS3动画 立方体展开效果

效果：

html：

	<div class="box">
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="front">front</div>
		<div class="behind">behind</div>
	</div>

css：

html{
	/* 3d元素距视图的距离 (子元素会获得透视效果) */ 
	perspective: 800px;
}
.box{
	width: 200px;
	height: 200px;
	margin: 200px auto;
	/* transform-style: flat | preserve-3d */
	/*                  2d   | 3d 平面呈现  */
	transform-style: preserve-3d;
	/* 立方体旋转动画 */
	animation: rotate 20s infinite linear;
}
/* 立方体六面样式 */
.box>div{
	width: 200px;
	height: 200px;
	border: 1px solid black;
	box-sizing: border-box;
	/* 绝对定位使所以面重叠在一起 之后通过旋转调节各个面的位置 */
	position: absolute;
	background-color: black;
	opacity: 0.5;
	color: white;
}
/* 立方体上面位置和展开动画 */
	.top{
		transform: rotateX(-270deg) translateY(-100px);
		transform-origin: top center;
		animation: topOpen 5s infinite linear;
	}
	/* 立方体下面位置和展开动画 */
	.bottom{
		transform: rotateX(270deg) translateY(100px);
		transform-origin: bottom center;
		animation: bottomOpen 5s infinite linear;
	}
	/* 立方体左侧位置和展开动画 */
	.left{
		transform: rotateY(270deg) translateX(-100px);
				transform-origin: center left;
				animation: leftOpen 5s infinite linear;
	}
	/* 立方体右侧位置和展开动画 */
	.right{
		transform: rotateY(-270deg) translateX(100px);
				transform-origin: top right;
				animation: rightOpen 5s infinite linear;
	}
	/* 立方体前面位置和展开动画 */
	.front{
				transform: translateZ(100px);
				animation: frontOpen 5s infinite linear;
	}
	/* 立方体后面位置和展开动画 */
	.behind {
	  	transform: translateZ(-100px) rotateY(180deg);
	  	animation: behindOpen 5s infinite linear;
	}
	@keyframes rotate{
		from {
	  			transform: rotateX(0deg) rotateY(0deg);
				}
		to {
			transform: rotateX(360deg) rotateY(360deg);
		}
	}
	@keyframes topOpen{
		50%{
			transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
		}	
	}
	@keyframes bottomOpen{
		50%{
			transform: rotateX(270deg) translateZ(100px) translateY(100px);
		}
	}
	@keyframes leftOpen{
		50%{
			transform: rotateY(270deg) translateZ(100px) translateX(-100px);
		}
	}
	@keyframes rightOpen{
		50%{
			transform: rotateY(-270deg) translateZ(100px) translateX(100px);
		}
	}
	@keyframes frontOpen{
		50%{
			transform: translateZ(200px);
		}
	}
	@keyframes behindOpen{
		50%{
			transform: translateZ(-200px) rotateY(180deg);
		}
	}