div ul li body {
	margin:0;
	padding:0;
}
.box {
	width:500px;
	height:500px;
	margin:300px auto;
	position:relative;
	transform-style:preserve-3d;
	transform:rotateX(45deg) rotateY(45deg);
	animation:change 5s 0.3s linear infinite;
}
@keyframes change {
	from {
	transform:rotateX(0deg) rotateY(0deg) rotateZ(90deg);
}
to {
	transform:rotateX(360deg)  rotateY(360deg) rotateZ(360deg);
}
}li {
	list-style:none;
	width:500px;
	height:500px;
	text-align:center;
	line-height:500px;
	position:absolute;
	top:0;
	left:0;
	opacity:0.6;
}
/*前*/
        li:nth-child(1) {
	background:red;
	transform:translateZ(250px);
}
/*后*/
        li:nth-child(2) {
	background:blueviolet;
	transform:translateZ(-250px);
}
/*左*/
        li:nth-child(3) {
	background:blue;
	transform:translateX(-250px)  rotateY(90deg);
}
/*右*/
        li:nth-child(4) {
	background:green;
	transform:translateX(250px) rotateY(90deg);
}
/*上*/
        li:nth-child(5) {
	background:yellow;
	transform:translateY(-250px) rotateX(90deg);
}
/*下*/
        li:nth-child(6) {
	background:brown;
	transform:translateY(250px) rotateX(90deg);
}