revision:
<div>
<div class="B_container">
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
</div>
<style>
/* basic style */
.B_container {position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;
height: 100vh; margin: 0; background-image: radial-gradient(circle at 0% 30%, red, blue);
-webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flex {display: flex; justify-content: center; align-items: center; width: 80px; height: 80px;
margin: 0 -80px 0 0;}
/* cube */
.cube { position: relative; width: 1px; height: 1px; margin: 0 80px 0 0; transform-style: preserve-3d;}
.wall { width: 80px; height: 80px; position: absolute; left: calc(-80px / 2); top: calc(-80px / 2);
text-align: center; line-height: 100px; border: solid 1px green; background-color: orange;}
.front {transform: translateZ(calc(80px / 2));}
.back {transform: translateZ(calc(-80px / 2)) rotateY(180deg);}
.right {transform: translateX(calc(80px / 2)) rotateY(90deg);}
.left {transform: translateX(calc(-80px / 2)) rotateY(-90deg);}
.top {transform: translateY(calc(-80px / 2)) rotateX(90deg);}
.bottom {transform: translateY(calc(80px / 2)) rotateX(-90deg);}
/* animation */
.flex:nth-of-type(4) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite;}
.flex:nth-of-type(4) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s infinite;}
.flex:nth-of-type(4) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(4) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s infinite;}
@keyframes rotation {
100% {transform: rotateX(270deg) rotateY(270deg);}
}
.wall { animation: color 2s linear 1.5s infinite;}
@keyframes color {
100% {background-color: skyblue;}
}
</style>