.box {
	width:500px;
	height:500px;
	margin:200px auto;
	position:relative;
	perspective:1000px;
	transform:rotateY(30deg) rotateX(30deg);
	transform-style:preserve-3d;
	animation:move 5s infinite linear;
}
.box:hover {
	animation:rotate 5s infinite linear;
}
.box>div {
	width:100%;
	height:100%;
	line-height:500px;
	font-size:20px;
	text-align:center;
	position:absolute;
	opacity:0.4;
}
.left {
	-webkit-transform:rotateY(-90deg) translateZ(250px);
}
.right {
	transform:rotateY(90deg) translateZ(250px);
}
.front {
	transform:translateZ(250px);
}
.back {
	transform:translateZ(-250px);
}
.top {
	transform:rotateX(90deg) translateZ(250px);
}
.bottom {
	transform:rotateX(-90deg) translateZ(250px);
}
@keyframes rotate {
	0% {
	transform:rotateY(0deg);
}
100% {
	transform:rotateY(360deg);
}
}@keyframes move {
	0% {
	transform:rotateX(0deg);
}
100% {
	transform:rotateX(360deg);
}
}