JSFiddle - React, Tailwind, and code Playground

HTML

<div id='log' style="position:fixed;right:0;top:0;"></div> 
<div style="height: 19em;"></div>
<div style="
-o-transform:translate(130px, -200px) skew(60deg, 0);
-webkit-transform:translate(130px, -200px) skew(60deg, 0);
-ms-transform:translate(130px, -200px) skew(60deg, 0);
-moz-transform:translate(130px, -200px) skew(60deg, 0);
transform:translate(130px, -200px) skew(60deg, 0);
">
<div id="clickMe" style="outline:1px solid silver;
padding: 0px;
-o-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
transform:rotate(25deg);
left:0;top:0;
width:120px;
height:70px;
background: ghostwhite;
" >120x70</div>

</div>

JavaScript

/*jslint plusplus: true, vars: true, indent: 2 */

/*
  convertPointFromPageToNode(element, event.pageX, event.pageY) -> {x, y}
  returns coordinate in element's local coordinate system (works properly with css transforms without perspective projection)

  convertPointFromNodeToPage(element, offsetX, offsetY) -> {x, y}
  returns coordinate in window's coordinate system (works properly with css transforms without perspective projection)
*/
(function () {
  "use strict";

  function Point(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  function CSSMatrix(data) {
    this.data = data;
  }

  CSSMatrix.fromString = function (s) {
    var c = s.match(/matrix3?d?\(([^\)]+)\)/i)[1].split(",");
    if (c.length === 6) {
      c = [c[0], c[1], "0", "0", c[2], c[3], "0", "0", "0", "0", "1", "0", c[4], c[5], "0", "1"];
    }
    return new CSSMatrix([
      parseFloat(c[0 * 4 + 0]),
      parseFloat(c[1 * 4 + 0]),
      parseFloat(c[2 * 4 + 0]),
      parseFloat(c[3 * 4 + 0]),

      parseFloat(c[0 * 4 + 1]),
      parseFloat(c[1 * 4 + 1]),
      parseFloat(c[2 * 4 + 1]),
      parseFloat(c[3 * 4 + 1]),

      parseFloat(c[0 * 4 + 2]),
      parseFloat(c[1 * 4 + 2]),
      parseFloat(c[2 * 4 + 2]),
      parseFloat(c[3 * 4 + 2]),

      parseFloat(c[0 * 4 + 3]),
      parseFloat(c[1 * 4 + 3]),
      parseFloat(c[2 * 4 + 3]),
      parseFloat(c[3 * 4 + 3]),
    ]);
  };

  CSSMatrix.prototype.multiply = function (m) {
    var a = this.data;
    var b = m.data;
    return new CSSMatrix([
      a[0 * 4 + 0] * b[0 * 4 + 0] + a[0 * 4 + 1] * b[1 * 4 + 0] + a[0 * 4 + 2] * b[2 * 4 + 0] + a[0 * 4 + 3] * b[3 * 4 + 0],
      a[0 * 4 + 0] * b[0 * 4 + 1] + a[0 * 4 + 1] * b[1 * 4 + 1] + a[0 * 4 + 2] * b[2 * 4 + 1] + a[0 * 4 + 3] * b[3 * 4 + 1],
      a[0 * 4 + 0] * b[0 * 4 + 2] + a[0 * 4 + 1] * b[1 * 4 + 2] + a[0 * 4 + 2] * b[2 * 4 + 2] + a[0 * 4 + 3] * b[3 * 4 + 2],
      a[0 * 4 + 0] * b[0 * 4 + 3] + a[0 * 4 + 1] * b[1 * 4 + 3] + a[0 * 4 + 2] * b[2 * 4 + 3] + a[0 * 4...