<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正方体</title>
	<style>
		*{margin: 0;padding: 0;}
		.per{width:400px;height:400px;position: absolute;top:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};left:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};margin:-200px;perspective:1000px;}
		.box{width:100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};height:100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};transform-style:preserve-3d;cursor:default;-webkit-animation:box 5s linear 14s infinite both;}
		.box>div{width: 100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};height: 100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};position: absolute;box-sizing:border-box;border:2px solid rgba(0,0,0,0.8);background:rgba(0,0,0,0);text-align:center;line-height:400px;font-size:50px;background-origin:border-box}
		.box .top{-webkit-animation:top 2s linear  2s  both;}
		.box .bottom{-webkit-animation:bottom 2s linear  4s  both;}
		.box .left{-webkit-animation:left 2s linear  6s  both;}
		.box .right{-webkit-animation:right 2s linear  8s  both;}
		.box .back{-webkit-animation:back 2s  linear 10s  both;}
		.box .front{-webkit-animation:front 2s  linear 12s  both;}
		.box:hover>div{background: rgba(0,0,0,0);border-color:rgba(0,0,0,0);}
		.box:hover .top{background: rgba(255,255,0,0.8);}
		.box:hover .bottom{background: rgba(0,255,0,0.8);}
		.box:hover .left{background: rgba(0,255,255,0.8);}
		.box:hover .right{background: rgba(0,0,255,0.8);}
		.box:hover .front{background: rgba(255,0,255,0.8);}
		.box:hover .back{background: rgba(255,0,0,0.8);}
		@-webkit-keyframes top{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateX(90deg) translateZ(200px);}
		}
		@-webkit-keyframes bottom{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateX(-90deg) translateZ(200px);}
		}
		@-webkit-keyframes left{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(-90deg) translateZ(200px);}
		}
		@-webkit-keyframes right{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(90deg) translateZ(200px);}
		}
		@-webkit-keyframes front{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:translateZ(200px);}
		}
		@-webkit-keyframes box{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotate3d(1,1,1,360deg);}
		}
		@-webkit-keyframes back{
			100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(180deg) translateZ(200px);}
		}

	</style>
</head>
<body>
<div class="per">
	<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="back">back</div>
		<div class="front">front</div>
	</div>		
</div>
</body>
</html>

注意一点:perspective属性不能设置在.box里,必须设置在其父元素中,否则会导致正方体失真。
在线demo:正方体演示