JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="up">
Up
</button>
<button type="button" id="down">
Down
</button>
<button type="button" id="left">
Left
</button>
<button type="button" id="right">
Right
</button>
<button type="button" id="rotate_left">
Rotate Left
</button>
<button type="button" id="rotate_right">
Rotate Right
</button>
<h1 id="transform-me">
^
</h1>

CSS

#transform-me {
  transform-origin: center;
  width: 20px;
  text-align: center;
}

JavaScript

let matrix = new DOMMatrix();
const el = document.getElementById("transform-me");

function updateTransform() {
	el.style.transform = matrix.toString();
}

// bind buttons
document.getElementById("up").addEventListener("click", () => {
	matrix.translateSelf(0, -10);
  updateTransform();
});

document.getElementById("down").addEventListener("click", () => {
	matrix.translateSelf(0, 10);
  updateTransform();
});

document.getElementById("left").addEventListener("click", () => {
	matrix.translateSelf(-10, 0);
  updateTransform();
});

document.getElementById("right").addEventListener("click", () => {
	matrix.translateSelf(10, 0);
  updateTransform();
});

document.getElementById("rotate_left").addEventListener("click", () => {
	matrix.rotateSelf(-15);
  updateTransform();
});

document.getElementById("rotate_right").addEventListener("click", () => {
	matrix.rotateSelf(15);
  updateTransform();
});