.rect-wrap {
	position:relative;
	perspective:2000px;
}
.container {
	width:400px;
	height:400px;
	transform-style:preserve-3d;
	transform-origin:50% 50% 100px;
	/* //设置3d空间的原点在平面中心再向Z轴移动200px的位置 */
          /* left:50%;
	margin-left:-200px;
	*/
          top:100px;
}
.slide {
	width:200px;
	height:200px;
	position:absolute;
	background:#000;
	line-height:200px;
	text-align:center;
	color:#fff;
	font-size:30px;
	font-weight:bold;
}
.top {
	left:100px;
	top:-100px;
	transform:rotateX(-90deg);
	transform-origin:bottom;
	background:red;
}
/* .top:hover {
	transform:rotateX(-90deg);
	transform-origin:bottom;
	transition:3s;
}
*/
        .bottom {
	left:100px;
	bottom:-100px;
	transform:rotateX(90deg);
	transform-origin:top;
	background:grey;
}
.left {
	left:-100px;
	bottom:100px;
	transform:rotateY(90deg);
	transform-origin:right;
	background:green;
}
.right {
	left:300px;
	bottom:100px;
	transform:rotateY(-90deg);
	transform-origin:left;
	background:yellow;
}
.front {
	left:100px;
	top:100px;
	transform:translateZ(200px);
	background:black;
}
.back {
	left:100px;
	top:100px;
	transform:translateZ(0);
	background:blue;
}
@keyframes rotate-frame {
	0% {
	transform:rotateX(0deg) rotateY(0deg);
}
10% {
	transform:rotateX(0deg) rotateY(180deg);
}
20% {
	transform:rotateX(-180deg) rotateY(180deg);
}
30% {
	transform:rotateX(-360deg) rotateY(180deg);
}
40% {
	transform:rotateX(-360deg) rotateY(360deg);
}
50% {
	transform:rotateX(-180deg) rotateY(360deg);
}
60% {
	transform:rotateX(90deg) rotateY(180deg);
}
70% {
	transform:rotateX(0) rotateY(180deg);
}
80% {
	transform:rotateX(90deg) rotateY(90deg);
}
90% {
	transform:rotateX(90deg) rotateY(0);
}
100% {
	transform:rotateX(0) rotateY(0);
}
}.container {
	animation:rotate-frame 30s linear;
}