Edit in JSFiddle

<div class="container">
  <div class="stage">
    <div class="cube">
      <div class="face faceZ front">front</div>
      <div class="face faceZ back">back</div>
      <div class="face faceX left">left</div>
      <div class="face faceX right">right</div>
      <div class="face faceY top">top</div>
      <div class="face faceY bottom">bottom</div>
    </div>
  </div>
</div>

/* Set the size of the sides of the box here */
.container {
  --sideX: 400px;
  --sideY: 300px;
  --sideZ: 200px;
}

/* Common properties for all faces:  position absolute */
.face {
  position: absolute;
}

.cube {
  transform-style: preserve-3d;
  width: var(--sideX);
  height: var(--sideY);
}

.stage {
  transform: translateZ(calc(var(--sideZ) / -2));
  transform-style: preserve-3d;
}

.container {
  outline: solid 1px red;
  width: var(--sideX);
  height: var(--sideY);
  margin: 50px auto 0 auto;
  /* Set perspective */
  perspective: 800px;
}

/* Define a size for the pairs of faces: */

/* "X-faces": left and right */
.faceX { width: var(--sideZ); height: var(--sideY); line-height: var(--sideY); }
/* "Y-faces": top and bottom */
.faceY { width: var(--sideX); height: var(--sideZ); line-height: var(--sideZ); }
/* "Z-faces": front and back */
.faceZ { width: var(--sideX); height: var(--sideY); line-height: var(--sideY); }

/* And rotation/translation for each individual face: */
.face.front { transform: rotateY(0deg) translateZ(calc(var(--sideZ) / 2)); }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--sideZ) / 2)); }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--sideZ) / 2)); }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--sideX) - var(--sideZ) / 2)); }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--sideZ) / 2)); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--sideY) - var(--sideZ) / 2)); }

.front { background-color: rgba(255, 0, 0, 0.5); }
.back { background-color: rgba(0, 255,  0, 0.5); }
.left { background-color: rgba(0, 0, 255, 0.5); }
.right { background-color: rgba(0, 255, 255, 0.5); }
.top { background-color: rgba(255, 0, 255, 0.5); }
.bottom { background-color: rgba(255, 255, 0, 0.5); }

/* Show the "base plane" */
.cube { outline: solid 1px black; /* background-color: rgba(0, 0, 0, 0.5); */ }

.face { color: white; text-align: center; font-size: 50px; }

/* Define an animation on the cube */
.cube {
  animation: 12s ease infinite alternate spin;
}

@keyframes spin {
  from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  50% { transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); } 
  to { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg); }
}