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

.cubespinner:hover {
    transform: translateY(60px) rotateX(90deg);
  }
  
  .cubespinner {
    transition: all 3s;
    transform-style: preserve-3d;
  }

  .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);
  }