JSFiddle - React, Tailwind, and code Playground

HTML

<div class="coube-wall">
  <div class="back side"></div>
  <div class="left side"></div>
  <div class="right side"></div>
  <div class="top side"></div>
  <div class="bottom side"></div>
  <div class="front side"></div>
</div>

CSS

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  perspective-origin: center center;
}

.coube-wall {
  width: 10em;
  height: 10em;
  border: 2px dotted white;
  transform-style: preserve-3d;  
  transition: transform 1s linear;
  animation: coube-fly-first 10s infinite;
}

.coube-wall:before,
.coube-wall:after {
  content: "";
  display: block;
  position: absolute;
  width: 10em;
  height: 10em;
  border: 4px dotted white;
}

.coube-wall:before {
  transform: rotateX(90deg);
}

.coube-wall:after {
  transform: rotatey(90deg);
}

.side {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 1px solid #000;
  opacity: .9;
}

.back {
  transform: translateZ(-5em);
  background: #000;
}

.front {
  transform: translateZ(5em);
  background: red;
}

.top {
  transform: translateY(-5em) rotateX(90deg);
  background: steelblue;
}

.bottom {
  transform: translateY(5em) rotateX(90deg);
  background: steelblue;
}

.left {
  transform: translateX(-5em) rotateY(90deg);
  background: gold;
}

.right {
  transform: translateX(5em) rotateY(90deg);
  background: green;
}

.coube-wall:hover{
  animation: coube-fly-second 10s infinite;
}

@keyframes coube-fly-first{
  50%  { transform: rotatey(360deg); }
}
@keyframes coube-fly-second{
  50%  { transform: rotatex(360deg); }
}