<div class="dice">
  <div class="side side-1">1</div>
  <div class="side side-2">2</div>
  <div class="side side-3">3</div>
  <div class="side side-4">4</div>
  <div class="side side-5">5</div>
  <div class="side side-6">6</div>
</div>

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

@keyframes rotate {
  0% { transform: rotate3d(1, 1.5, -1, 0deg); }
  100% { transform: rotate3d(1, 1.5, -1, 360deg); }
}

.dice {
  animation: rotate 10s linear infinite;
  width: 30vmin;
  height: 30vmin;
  background: #ccc;
  transform: rotate3d(1, 1, -1, 0deg);
  transform-style: preserve-3d;
}

.side {
  background: #f003;
  position: absolute;
  width: 100%;
  height: 100%;
}

.side-1 { transform: rotateX(000deg) translateZ(15vmin); background: #f00; }
.side-2 { transform: rotateY(270deg) translateZ(15vmin); background: #0f0; }
.side-3 { transform: rotateX(270deg) translateZ(15vmin); background: #00f; }
.side-4 { transform: rotateX(090deg) translateZ(15vmin); background: #ff0; }
.side-5 { transform: rotateY(090deg) translateZ(15vmin); background: #f0f; }
.side-6 { transform: rotateX(180deg) translateZ(15vmin); background: #0ff; }