JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rotate"></div>
<p>
    <div>RotateX(<span id="logx"></span>)</div>
    <div>RotateY(<span id="logy"></span>)</div>
</p>

CSS

#body {
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve-3d;
}

#rotate {
  background-color: #c00;
  width: 100px;
  height: 100px;
  margin: 10px;
}

JavaScript

var el = document.getElementById('rotate');
var logx = document.getElementById('logx');
var logy = document.getElementById('logy');
var matrix = new WebKitCSSMatrix(el.style.webkitTransform);
var pi = Math.PI
var t = setInterval(rotate, 30)

function rotate(){
   logx.innerHTML = Math.floor(Math.acos(matrix.a) * (180/pi));
   logy.innerHTML = Math.floor(Math.asin(matrix.b) * (180/pi));
   matrix = matrix.rotateAxisAngle(1, 1, 0, 1);
   el.style.webkitTransform = matrix.toString();
}