JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
  <div id="cube" class="">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
  </div>
    
    <div class="north overlay"></div>
    <div class="east overlay"></div>
    <div class="south overlay"></div>
    <div class="west overlay"></div>
</section>

CSS

.container {
   
}

.overlay {
    position: absolute;
    z-index: 10;
    background-color: red;
    opacity: 0.5;
    height: 100%;
    width: 100%;
}

.north { top: -180px; }
.east { right: -180px; }
.south { bottom: -180px; }
.west { left: -180px; }

.container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#cube div {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  outline: 1px solid transparent;
}

#cube { -webkit-transform: translateZ( -100px ); transform: translateZ( -100px ); }

#cube .front  { -webkit-transform: rotateY(   0deg ) translateZ( 100px ); transform: rotateY(   0deg ) translateZ( 100px ); }
#cube .back   { -webkit-transform: rotateX( 180deg ) translateZ( 100px ); transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right  { -webkit-transform: rotateY(  90deg ) translateZ( 100px ); transform: rotateY(  90deg ) translateZ( 100px ); }
#cube .left   { -webkit-transform: rotateY( -90deg ) translateZ( 100px ); transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top    { -webkit-transform: rotateX(  90deg ) translateZ( 100px ); transform: rotateX(  90deg ) translateZ( 100px ); }
#cube .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 100px ); transform: rotateX( -90deg ) translateZ( 100px ); }

#cube { -webkit-transition: -webkit-transform 1s; transition: transform 1s; }

JavaScript

var rotateX = 0, rotateY = 0;
var tease = {
    north: -10,
    east: -10,
    south: 10,
    west: 10
};

var tic = {
    north: -90,
    east: -90,
    south: 90,
    west: 90
};

var getTeaseX = function (direction) {
    var offset = (direction.match("west|east"))? 0 : tease[direction];
    
    return "rotateX(" + (rotateX + offset) + "deg)";
};

var getTeaseY = function (direction) {
    var offset = (direction.match("west|east"))? tease[direction] : 0;
    
    return "rotateY(" + (rotateY + offset) + "deg)";
};

var getRotateX = function (direction) {
    var offset = (direction.match("west|east"))? 0 : tic[direction];
    var rotate = "rotateX(" + (rotateX + offset) + "deg)";
    rotateX += offset;
    
    return rotate;
};

var getRotateY = function (direction) {
    var offset = (direction.match("west|east"))? tic[direction] : 0;
    var rotate = "rotateY(" + (rotateY + offset) + "deg)";
    rotateY += offset;
    
    return rotate;
};

var getTease = function (direction) {
    var rotateX = getTeaseX(direction);
    var rotateY = getTeaseY(direction);
    
    return rotateX + ' ' + rotateY;
};

var getRotate = function (direction) {
    var rotateX = getRotateX(direction);
    var rotateY = getRotateY(direction);
    
    return rotateX + ' ' + rotateY;
};

$(".overlay").mouseenter(function () {
    var direction = $(this).attr("class").split(" ")[0];
    var tease = getTease(direction);
    console.log("tease: %o", tease);
    $("#cube").css({ transform: 'translateZ(-100px) ' + tease });
    $(".overlay").toggleClass("teasing");
}).mouseleave(function () {
    console.log("revert: %o", 'rotateX(' + rotateX + ') rotateY(' + rotateY + ')');
    $("#cube").css({ transform: 'translateZ(-100px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)' });
    $(".overlay").toggleClass("teasing");
});

$(document).on("click", ".overlay.teasing", function () {
    var direction = $(this).attr("class").split(" ")[0];
    var rotate = getRotate(direction);
...