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);
}