<div class="cube">
  <div class="cube__side"></div>
  <div class="cube__side"></div>
  <div class="cube__side"></div>
  <div class="cube__side"></div>
  <div class="cube__side"></div>
  <div class="cube__side"></div>
</div>

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

.cube {
  display: grid;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
}

.cube__side {
  padding: 50px;
  grid-area: 1/ 1;
  box-shadow: inset 0 0 0 1px #000;
  transform: rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) translateZ(var(--z, 50px));
}

.cube__side:nth-of-type(3n + 1) {--x: 90deg}

.cube__side:nth-of-type(3n + 2) {--y: 90deg}

.cube__side:nth-of-type(even) {--z: -50px}