.box {
	width:200px;
	height:200px;
	margin:200px auto;
	position:relative;
	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:200px;
	font-size:20px;
	text-align:center;
	position:absolute;
	/*opacity:0.4;
	*/
}
.left {
	transform:rotateY(-90deg) translateZ(100px);
	background-color:orange;
}
.right {
	transform:rotateY(90deg) translateZ(100px);
	background-color:pink;
}
.front {
	transform:translateZ(100px);
	background-color:green;
}
.back {
	transform:translateZ(-100px);
	background-color:blue;
}
.top {
	transform:rotateX(90deg) translateZ(100px);
	background-color:#FFF3F3;
}
.bottom {
	transform:rotateX(-90deg) translateZ(100px);
	background-color:#000;
}
@keyframes rotate {
	0% {
	transform:rotateY(0deg);
}
100% {
	transform:rotateY(360deg);
}
}@keyframes move {
	0% {
	transform:rotateX(0deg);
}
100% {
	transform:rotateX(360deg);
}
}