JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container c1">
    <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>
<div class="container c2">
    <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>
<div class="container c3">
    <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

BODY {
  padding-top: 50px;
  perspective: 500px;
  perspective-origin: center center;
  }

.container {
  width: 10em;
  height: 10em;
  border: 2px dotted white;
  transform-style: preserve-3d;
  }
  .c1 {
    animation: rotate 10s infinite linear;
  }
  .c2 {
    animation: rotate2 10s infinite linear;
    position:relative;
    top:225px;
  }
  .c3 {
    animation: rotate3 10s infinite linear;
  }
.container:before,
.container:after {
  content: "";
  display: block;
  position: absolute;
  width: 10em;
  height: 10em;
  border: 2px dotted white;
  }
  .container:before {
    transform: rotateX(90deg);  
    }
  .container:after {
    transform: rotatey(90deg);  
    }

.side {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 1px solid white;
  opacity: .7;
  }

.back {
  transform: translateZ(-5em);
  background: orange;
  }
.front {
  transform: translateZ(5em);
  background: gold;
  }
.top {
  transform: translateY(-5em) rotateX(90deg);
  background: skyblue;
  }
.bottom {
  transform: translateY(5em) rotateX(90deg);
  background: steelblue;
  }
.left {
  transform: translateX(-5em) rotateY(90deg);
  background: lightgreen;
  }

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

@keyframes rotate {
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotate3 {
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg);
  }
25% {
  transform: rotateX(360deg) rotateY(-45deg) rotateZ(0deg);
}
50% {
  transform: rotateX(720deg) rotateY(0deg) rotateZ(45deg);
}
75% {
  transform: rotateX(1080deg) rotateY(45deg) rotateZ(0deg);
}
  100% {
    transform: rotateX(1440deg) rotateY(0deg) rotateZ(-45deg);
  }
}

// Helpers

HTML, BODY {
    height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
}