JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage">
    <div class="cube">
        <figure class="back"></figure>
        <figure class="top"></figure>
        <figure class="bottom"></figure>
        <figure class="left"></figure>
        <figure class="right"></figure>
        <figure class="front"></figure>
    </div>
</div>

SASS

.stage
    width: 300px
    height: 300px
    -webkit-perspective: 1600px
    -webkit-perspective-origin: 50% -240px
    position: fixed
    top: 150px
    left: 500px

figure
    display: block
    position: absolute
    width: 300px
    height: 300px
    background-color: #fff
    -webkit-transform-origin: 50% 50% 0
    -webkit-transform: rotateY(386deg) rotateX(0deg)
    background-size: 100%
    &.left, &.right, &.back, &.front
        height: 258px
        background-color: rgba(205, 200, 200, 0.568)
        border: 2px solid red
.cube
    -webkit-transform-style: preserve-3d
    -webkit-animation: rotate 0s linear
    -webkit-transform: rotateY(150deg) rotateX(30deg)
.front
    -webkit-transform: translateZ(150px)
.back 
    -webkit-transform: rotateY(180deg) translateZ(150px)

.top
    -webkit-transform: rotateX(90deg) translateZ(150px)

.bottom
    -webkit-transform: rotateX(-90deg) translateZ(150px)

.left
    -webkit-transform: rotateY(-90deg) translateZ(150px)

.right
    -webkit-transform: rotateY(90deg) translateZ(150px)

@-webkit-keyframes rotate
    0% 
        -webkit-transform: rotateY(306deg) rotateX(0deg)
    100% 
        -webkit-transform: rotateY(360deg) rotateX(0deg)

JavaScript

const node = document.querySelector('.cube');

const SPEED = 1;

const dispose = dndRotate(function(value) {
  node.style.transform = `rotateY(${value * SPEED}deg) rotateX(30deg)`;
});
  
  

function dndRotate(callback) {
	let currentX = 0;
	let x = null;
  
  function move(e) {
  	const d = e.pageX - x;
    currentX += d;
    x = e.pageX;
    callback(currentX);
  }
  
  function stop() {
  	if (x != null) {
    	x = null;
      document.removeEventListener('mousemove', move);
      document.removeEventListener('mouseup', stop);
    }
  }
  
  let start = function(e) {
  	if (x == null) {
      x = e.pageX;
      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', stop);
    }
  };
  
  document.addEventListener('mousedown', start);
  return function() {
  	if (start) {
  		document.removeEventListener('mousedown', start);
      start = null;
    }
  };
}