JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cube">

<div id="face1">face1</div>

<div id="face2">face2</div>

</div>

CSS

#cube{
    width:400px;
    height:400px;
    margin:200px;
    -ms-transform-origin: 50% 50%;
 } 
#face1
{
position:absolute;
    width:200px;
    height:200px;
    background-color:blue;-ms-backface-visibility: visible;

-ms-transform-origin: 50% 50%;

-ms-transform: perspective(1050px) rotateX(77deg) translateX(0px) translateY(4px) translateZ(138px);

}
#face2
{
position:absolute;
    width:200px;
    height:200px;
    background-color:red;-ms-backface-visibility: visible;

-ms-transform-origin: 50% 50%;

-ms-transform: perspective(1050px) rotateX(77deg) translateX(0px) translateY(4px) translateZ(-200px);




}

JavaScript

var xAngle = 4, yAngle = 4;

setInterval(function(){
    xAngle += 4;
    yAngle+=4;
    //$('#cube').css("-ms-transform","perspective(1050px) rotateY("+yAngle+"deg)");
   // $('#cube').children().css("-ms-transform","perspective(1050px) rotateY("+yAngle+"deg)");
    
$('#face1').css("-ms-transform","perspective(1050px) translateX(0px) translateY(4px) translateZ(-200px) rotateY("+yAngle+"deg)");

//$('#face2').css("-ms-transform","perspective(1050px) rotateY("+yAngle+"deg)");


}, 200);