JSFiddle - React, Tailwind, and code Playground

HTML

<section class="viewport" id="content">
  <div class="cube rotate1 " id="test">

    <div class="front" id="ajax-container"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>

  </div>


</section>
<button type="button" class="test">Click Me!</button>

CSS

.viewport {
  width: 400px;
  height: 400px;
  margin-top: 50px;
  position: relative;
  perspective-origin: 50% 50%;
  perspective: 1000px;
}

.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eee;
  color: #fff;
  font: 10px arial;
  transition: transform 0.2s ease-in;
}

.front {
  transform: translateZ(100px);
  overflow: hidden;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}

@keyframes rotate1 {
  to {
    transform: rotateX(90deg) rotateY(90deg);
  }
}

@keyframes rotate2 {
  to {
    transform: rotateX(180deg) rotateY(180deg);
  }
}

@keyframes rotate3 {
  to {
    transform: rotateX(270deg) rotateY(270deg);
  }
}

@keyframes rotate4 {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: rotate1 3s, rotate2 3s, rotate3 3s, rotate4 3s infinite linear;
  animation-fill-mode: forwards;
}

.paused {
  animation-play-state: paused;
}

JavaScript

$(".test").on('click',function(e){
        $(".cube").addClass('paused');
        alert((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360);
  });
  
  var animStart = new Date();