Rotating Cube

<div class="nuda-cube-scene" aria-hidden="true">
  <div class="nuda-cube">
    <div class="nuda-cube__face nuda-cube__face--front">1</div>
    <div class="nuda-cube__face nuda-cube__face--back">2</div>
    <div class="nuda-cube__face nuda-cube__face--right">3</div>
    <div class="nuda-cube__face nuda-cube__face--left">4</div>
    <div class="nuda-cube__face nuda-cube__face--top">5</div>
    <div class="nuda-cube__face nuda-cube__face--bottom">6</div>
  </div>
</div>

/* Rotating Cube
   CSS 3D cube that rotates continuously.
   Customize: --cube-size, --cube-color, --cube-speed */

.nuda-cube-scene {
  --cube-size: 80px;
  width: var(--cube-size);
  height: var(--cube-size);
  perspective: 250px;
  margin: 2rem auto;
}

.nuda-cube {
  --cube-color: #e4ff54;
  --cube-speed: 6s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: nuda-cube-spin var(--cube-speed) linear infinite;
}

.nuda-cube__face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cube-color);
  border: 1px solid rgba(228, 255, 84, 0.25);
  background: rgba(228, 255, 84, 0.04);
}

.nuda-cube__face--front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.nuda-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.nuda-cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.nuda-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.nuda-cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.nuda-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

@keyframes nuda-cube-spin {
  from { transform: rotateX(0) rotateY(0); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-cube {
    animation: none;
    transform: rotateX(-20deg) rotateY(30deg);
  }
}