JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage" style="width: 120px; height: 120px;">
<div class="cubespinner">
<div class="face1">1</div>
<div class="face6">2</div>
</div>
</div>

CSS

@keyframes spincube {
    from {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    to {
      transform: rotateX(90deg);
    }
  }

  .cubespinner:hover {

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

  .cubespinner div {
    position: absolute;
    width: 400px;
    height: 120px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    line-height: 120px;
    text-align: center;
    font-size: 100px;
  }

  .cubespinner .face1 {
    transform: translateZ(60px);
  }

  .cubespinner .face6 {
    transform: rotateX(-90deg) translateZ(60px);
  }