#preserve {
	width:200px;
	height:200px;
	transform-style:preserve-3d;
	position:fixed;
	top:200px;
	left:200px;
	/* transform:rotatey(45deg) rotatex(45deg);
	*/
            animation:rotate 5s  infinite alternate;
}
#preserve>div {
	width:200px;
	height:200px;
	position:absolute;
	left:0;
	top:0;
	font-size:80px;
	line-height:200px;
	text-align:center;
	/* opacity:0.5;
	*/
}
.one {
	background-color:red;
	transform:translateZ(100px);
}
.two {
	background-color:yellow;
	transform:translateZ(-100px);
}
.three {
	background-color:green;
	transform:rotateX(90deg) translateZ(100px);
}
.four {
	background-color:#000;
	transform:rotateX(90deg) translateZ(-100px);
}
.five {
	background-color:blue;
	transform:rotateY(90deg) translateZ(100px);
}
.six {
	background-color:blue;
	transform:rotateY(90deg) translateZ(-100px);
}
.qq {
	background-color:blue;
	transform:rotateY(90deg);
}
.bb {
	background-color:blue;
	transform:rotateX(90deg);
}
@keyframes rotate {
	0% {
	transform:rotateY(0deg) rotateX(0deg);
}
/* 25% {
	transform:rotateY(45deg) rotateX(45deg);
}
50% {
	transform:rotateY(90deg) rotateX(90deg);
}
75% {
	transform:rotateY(135deg) rotateX(135deg);
}
*/
            100% {
	transform:rotateY(360deg) rotateX(360deg);
}
}