JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
   <div id="wrap">             
        <div id="plane1"></div>
        <div id="plane2"></div>
    </div>
</div>

CSS

#container {
    width:200px;
    height:200px;
    -moz-perspective: 400px;
    -webkit-perspective: 400px;
    perspective: 400px;
    
    margin:50px auto;

}

#wrap {
    
    width:200px;
    height:200px;

    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -moz-transform: rotateY(45deg) rotateX(-45deg); 
    -webkit-transform: rotateY(45deg) rotateX(-45deg); 
    transform: rotateY(45deg) rotateX(-45deg); 
}

#plane1 {
    width:200px;
    height:200px;
    background:red;
    position:absolute;
}

#plane2 {
    width:200px;
    height:200px;
    background:blue;
    position:absolute;
    
    -moz-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg); 
}

JavaScript

var element = document.getElementById('wrap');
				document.addEventListener('mousemove', function (e) {
					var transform = 'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)';
					element.style.webkitTransform = transform;
					element.style.transform = transform;
				}, false);