JSFiddle - React, Tailwind, and code Playground

by tinyhustlee

HTML

<script src="https://unpkg.com/rematrix"></script>
<div id="example">
	Hello world!
</div>

CSS

#example {
	background: #D13421;
	border-radius: 4px;
	padding: 1em;
	color: white;
	text-align: center;
	font-weight: bold;
	font-family: sans-serif;
	width: 8em;
	margin: 8em auto 0;
  transition: 0.3s transform;
  
  /*
    try uncommenting below and re-running the
    page; notice how this transform combines
    with the rotation created using Rematrix.
  */
  
 	transform: scale(1.5)
}

JavaScript

var element = document.querySelector('#example')
var style = getComputedStyle(element).transform

var transform = Rematrix.fromString(style)

var r1 = Rematrix.rotateZ(20)
var r2 = Rematrix.rotateZ(65)
var r3 = Rematrix.rotateZ(-40)

var product = [transform, r1, r2, r3].reduce(Rematrix.multiply)
console.log(Rematrix.toString(product));
element.style.transform = Rematrix.toString(product)