JSFiddle - React, Tailwind, and code Playground
HTML
Click the red square
<div id="transformed"></div>
CSS
body {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 100%;
}
div {
height: 100px;
width: 100px;
background-color: #c00;
-webkit-transform: scale3d(1.5,1.5,1.5) translate3d(100px, 100px, 0);
-webkit-transition: -webkit-transform 500ms ease;
}
JavaScript
$("#transformed").click(function(){
var element = $(this)[0];
var transform = new WebKitCSSMatrix(window.getComputedStyle(element).webkitTransform);
transform = transform.rotateAxisAngle(0,0,0,45)
element.style.webkitTransform = transform;
})