JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div style="width: 120px; height: 120px;">
    <div class="contenedorDeLas6caras">
      <div class="face1">
        1
      </div>
      <div class="face2">
        2
      </div>
      <div class="face3">
        3
      </div>
      <div class="face4">
        4
      </div>
      <div class="face5">
        5
      </div>
      <div class="face6">
        6
      </div>
    </div>
  </div>

CSS

@-webkit-keyframes cubo
{
  16%      { -webkit-transform: rotateY(-90deg);  }
  33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
  50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
  66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
  83%      { -webkit-transform: rotateX(90deg); }
}
@-ms-keyframes cubo
{
  16%      { -ms-transform: rotateY(-90deg);  }
  33%      { -ms-transform: rotateY(-90deg) rotateZ(90deg); }
  50%      { -ms-transform: rotateY(-180deg) rotateZ(90deg); }
  66%      { -ms-transform: rotateY(90deg) rotateX(90deg);  }
  83%      { -ms-transform: rotateX(90deg); }
}

.contenedorDeLas6caras {
  -webkit-animation-name: cubo;
  -webkit-transform-style: preserve-3d;  /*  Si no se pone 3d, se anima sólo un cuadro sin grosor  */
  -webkit-transform-origin: 60px 60px 0; /*  Si no se pone origin, el cubo camina  */
  -webkit-animation-duration: 12s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;

  -ms-animation-name: cubo;
  -ms-transform-style: preserve-3d;
  -ms-transform-origin: 60px 60px 0;
  -ms-animation-duration: 12s;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-iteration-count: infinite;
}

.contenedorDeLas6caras div {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.8);
  text-align: center;
  font-size: 100px;
}

.contenedorDeLas6caras .face1 {
  -webkit-transform: translateZ(60px);
  -ms-transform: translateZ(60px);
}
.contenedorDeLas6caras .face2 {
  -webkit-transform: rotateY(90deg) translateZ(60px);
  -ms-transform: rotateY(90deg) translateZ(60px);
}
.contenedorDeLas6caras .face3 {
  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
  -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.contenedorDeLas6caras .face4 {
  -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
  -ms-transform: rotateY(180deg) rotateZ(90deg)...