JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">

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

<button data-degree="1" data-axis="X">
    X-Axis (+)
</button>

<button data-degree="-45" data-axis="X">
    X-Axis (-)
</button>

<button data-degree="45" data-axis="Y">
    Y-Axis (+)
</button>

<button data-degree="-45" data-axis="Y">
    Y-Axis (-)
</button>

<button data-degree="45" data-axis="Z">
    Z-Axis (+)
</button>

<button data-degree="-45" data-axis="Z">
    Z-Axis (-)
</button>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.scene {
    width: 100px;
    height: 100px;
    perspective: 100px;
    background-color: rgb(0,0,0);
}

.cube {
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transform: translateZ(-50px);
    text-indent: 0;
  
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(3, 121, 255, 0.5);
    color: #FFF;
    line-height: 100px;
    text-indent: 0;
    text-align: center;
}

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

JavaScript

const rotation_degree = { 'X': 0, 'Y': 0, 'Z': 0 };
const axisIdToAxis = { 'X': [1, 0, 0], 'Y': [0, 1, 0], 'Z': [0, 0, 1] };
const currentMatrix = new DOMMatrix;

$(document).on("click", "button", function (e) {
    const degree = parseInt ($(this).attr ("data-degree"));
    const axis   = $(this).attr ("data-axis");
    
    
    
    // Animate on an unused property
    $(".cube").css ("text-indent", rotation_degree[axis]);
    
    $('.cube').animate (
    {
        textIndent: rotation_degree[axis] + degree
    },
    {
        step: function (now,fx) 
        {   
            rotation_degree[axis] = now;

            // Center cube in scene
            const transform = `translateZ(-50px) rotate${axis}(${now}deg) ${currentMatrix}`;
            $(this).css ('transform', transform);
            
        },
        complete: function() {
            // apply rotation to currentMatrix
            currentMatrix.preMultiplySelf(
               new DOMMatrix().rotateAxisAngleSelf(
                  ...axisIdToAxis[axis], degree));
            // zero this out since we applied it above
            rotation_degree[axis] = 0;
        },

        duration: 'slow',
        
        queue: true,

    },
    
    'linear',
    
    );
    
});