JSFiddle - React, Tailwind, and code Playground

by sidharthbajpai

HTML

<div class="box">
 
</div>

CSS

.box {
  margin-left: 300px;
  width: 10px;
  height: 10px;
  background-color: black;
  transform: rotate(15deg);
}

JavaScript

let box = document.querySelector('.box');
function animate() {
	const style = window.getComputedStyle(box);
  const matrix = new DOMMatrixReadOnly(style.transform);
  const translateY = matrix.m42 + 2;
  box.style.transform = `rotate(12deg) translateY(${translateY}px)`;
  requestAnimationFrame(() => animate());
}
requestAnimationFrame(() => animate());