JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Old CSS OM</h1>
<div class="transformElement"></div>

CSS

.transformElement{
  background-color: red;
  margin:5em auto;
  min-height: 84px;
  width: 84px;
}
 h1{
   text-align: center;
 }

JavaScript

let elem = document.getElementsByClassName('transformElement')[0];
let rafId;
let angle; 
elem.style.transform = 'rotate3d(0,0,1,0deg)';



function draw(){
rafId = requestAnimationFrame(draw);
  var st = window.getComputedStyle(elem, null);
  var matrix = st.getPropertyValue("transform");
  if(matrix !== 'none') {
  	var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

  } else { var angle = 0; }
  
  angle = (angle+ 5) % 360;
  
	elem.style.transform = "rotate3d(0,0,1,"+angle+"deg)";
}

elem.addEventListener('mouseenter', ()=>{
	draw();
})

elem.addEventListener('mouseleave', () =>{
cancelAnimationFrame(rafId);
})