JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<div id="foo">
Hello
</div>

CSS

#foo {
  width: 400px;
  height: 200px;
  background: red;
}

JavaScript

const RAD_30 = Math.PI / 6;
const COS_30 = Math.cos(RAD_30);

const el = document.getElementById('foo');

const m = new DOMMatrix();
m.translateSelf(100, 100);
m.rotateSelf(30);
m.skewXSelf(-30);
m.scaleSelf(1, COS_30);
el.style.transform = m.toString();