style.css

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  perspective: 400px;
}

.cube {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.cube:hover {
  animation: spin 5s linear infinite;
}

.side {
  --size: 75px;

  width: var(--size);
  height: var(--size);
  position: absolute;
  background-color: hsla(200, 100%, 50%, 0.5);
  border: 1px solid hsla(200, 100%, 10%, 0.5);

  display: flex;
  justify-content: center;
  align-items: center;

  transform: rotateY(var(--rotate-y, 0)) rotateX(var(--rotate-x, 0))
    translateZ(calc(var(--size) / 2));
}

.left {
  --rotate-y: -90deg;
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.right {
  --rotate-y: 90deg;
}

.back {
  --rotate-y: 180deg;
}

.top {
  --rotate-x: 90deg;
}

.bottom {
  --rotate-x: -90deg;
}