JSFiddle - React, Tailwind, and code Playground

HTML

<div class="m">
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="front"></div>
    <div class="back"></div>
</div>
</div>

<input type="range" name="points" min="1" max="100" value='1'>

CSS

.box div {
    height: 200px; width: 200px; display: inline-block; 
    position: absolute; top:0; left 0;
    /* -webkit-transform-origin:50% 50%; */
}
.m {
    -webkit-perspective:600px;
}
.box {
    -webkit-transform-style: preserve-3d;
    position: relative; 
    top:60px; left:50%; margin-left: -100px;
    width: 200px; height: 200px;
    /*border:3px solid; */
}
.top {     -webkit-transform: translate3d(0px, -100px, 0px)  rotate3d(1,0,0,90deg);   }
.bottom {  -webkit-transform: translate3d(0px, 100px, 0px) rotate3d(1,0,0,-90deg);   }
.right {   -webkit-transform: translate3d(100px, 0px, 0px) rotate3d(0,1,0,-90deg);   }
.left {    -webkit-transform: translate3d(-100px, 0px, 0px) rotate3d(0,1,0,90deg);   }
.front {   -webkit-transform: translate3d(0px, 0px, 100px) rotate3d(0,0,0,0);   }
.back {    -webkit-transform: translate3d(0px, 0px, -100px) rotate3d(0,0,0,0);   }

.top { background-color: red; }
.bottom { background-color: purple;}
.right { background-color: orange; }
.left { background-color: yellow; }
.front { background-color: green; }
.back { background-color: blue; }

/* .front {    background: linear-gradient(to bottom, blue, rgba(220,30,30,0));} */

JavaScript

$('input[type=range]').on('input',function (e) {
    $('.box').css('transform','rotateY('+($(this).val()/100)*360+'deg) rotateX(20deg)');
});