JSFiddle - React, Tailwind, and code Playground

by gregir

HTML

<div id="cube">

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

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

</div>

CSS

#cube{
    width:200px;
    height:200px;
    margin:100px;
    -ms-transform-origin: 50% 50%;
    -ms-transform-style: preserve-3d;
    -moz-tranform-style: preserve-3d;
 }
#face1
{
    position:absolute;
    width:200px;
    height:200px;
    background-color:blue;
    -ms-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -ms-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -ms-transform: perspective(1000px) rotateY(-100deg);
    -moz-transform: perspective(1000px) rotateY(-100deg);
}
#face2
{
    position:absolute;
    width:200px;
    height:200px;
    background-color:red;
    -ms-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -ms-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform: perspective(1020px) rotateY(80deg);
    -moz-transform: perspective(1020px) rotateY(80deg);
}

JavaScript

var xAngle = 4, yAngle = 4;

setInterval(function(){
    xAngle += 4;
    yAngle += 4;
    //$('#cube').css('-ms-transform','rotate3d(0, 1, 0, '+yAngle+'deg)');
    //$('#cube').css('-moz-transform','rotate3d(0, 1, 0, '+yAngle+'deg)');
},200);