<style>

.ea{
width:200px;
height:200px;
margin:100px auto ;
position: relative;
transform-style:preserve-3d;
perspective:2000px;
animation:boss 1s infinite linear;
animation-delay: 6s ;
}
@keyframes boss{
100%{
transform: rotate3d(1, 1, 1, 360deg) translate3d(80px,80px,80px) scale3d(0.5, 0.5,0.5) skew(30deg,45deg);
}
}
.left,.right,.top,.bottom,.front,.behand{
width:200px;
height:200px;
color:black;
opacity: 0.9;
font-size:200px;
text-align: center;
line-height:200px;
position:absolute;
}
.left{
background:red;
z-index: 6;
transform-origin: left;
animation: m1 1s;
animation-fill-mode:forwards;
}
@keyframes m1{
100%{
transform: rotateY(-90deg);
}
}
.right{
background:orange;
z-index: 5;
transform-origin: right;
animation: m2 1s;
animation-fill-mode:forwards;
animation-delay:1s;
}
@keyframes m2{
100%{
transform: rotateY(90deg);
}

}
.top{
background:chartreuse;
z-index: 4;
transform-origin: top;
animation: m3 1s;
animation-fill-mode:forwards;
animation-delay:2s;
}
@keyframes m3{
100%{
transform: rotateX(90deg);
}
}
.bottom{
background:deepskyblue;
z-index: 3;
transform-origin: bottom;
animation: m4 1s;
animation-fill-mode:forwards;
animation-delay:3s;
}
@keyframes m4{
100%{
transform: rotateX(-90deg);
}
}
.front{
background:yellow;
z-index: 2;
animation: m5 1s;
animation-fill-mode:forwards;
animation-delay:4s;

}
@keyframes m5{
100%{
transform: translateZ(200px);
}
}
.behand{
background:purple;
z-index: 1;
animation: m6 1s;
animation-fill-mode:forwards;
animation-delay:5s;
}
@keyframes m6{
100%{
transform: rotateY(180deg);
}
}

</style>

<div class="ea">
<div class="left">1</div>
<div class="right">2</div>
<div class="top">3</div>
<div class="bottom">4</div>
<div class="front">5</div>
<div class="behand">6</div>
</div>