* {
	padding:0;
	margin:0;
	perspective:30000px;
}
.box {
	width:100px;
	height:100px;
	margin:0 auto;
	margin-top:100px;
	position:relative;
	transform-style:preserve-3d;
	transform:rotateX(-40deg) rotateY(-60deg);
	animation:myRotate 5s ease-in-out infinite backwards;
}
.box div {
	width:100px;
	height:100px;
	background:rgba(153,153,153,0.5);
	position:absolute;
	font-size:2em;
	color:red;
	font-weight:bold;
	font-family:"微软雅黑";
	text-align:center;
	line-height:100px;
	border:1px solid #999;
}
.one {
	transform:translateZ(50px);
}
.two {
	transform:rotateY(180deg) translateZ(50px);
}
.three {
	transform:rotateY(90deg) translateZ(50px);
}
.four {
	transform:rotateY(-90deg) translateZ(50px);
}
.five {
	transform:rotateX(90deg) translateZ(50px);
}
.six {
	transform:rotateX(-90deg) translateZ(50px);
}
@keyframes myRotate {
	0% {
	transform:rotateX(-40deg) rotateY(-60deg);
}
50% {
	transform:rotateX(-360deg) rotateY(360deg);
}
100% {
	transform:rotateX(-40deg) rotateY(-60deg);
}