JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="a" style="-webkit-transform-origin: 0px 0px;"></div>
CSS
.a{
width:200px;
height: 200px;
min-width:200px;
min-height: 200px;
background: #2b5979;
float: left;
}
JavaScript
var CSSMatrix = function(h) {
if (!h || h === "none") {
for (var g = 0; g < 16; g++) {
this["m" + ((g / 4 | 0) + 1) + (g % 4 + 1)] = g % 4 == (g / 4 | 0) ? 1 : 0
}
return this
}
return this.setMatrixValue(h)
};
CSSMatrix.prototype = {constructor: CSSMatrix, PID180: Math.PI / 180, get a() {
return this.m11
}, get b() {
return this.m21
}, get c() {
return this.m12
}, get d() {
return this.m22
}, get e() {
return this.m13
}, get f() {
return this.m23
}, set a(g) {
this.m11 = g
}, set b(g) {
this.m21 = g
}, set c(g) {
this.m12 = g
}, set d(g) {
this.m22 = g
}, set e(g) {
this.m13 = g
}, set f(g) {
this.m23 = g
}, inverse: function() {
var g = this.__clone__();
g.m11 = g.m23 * g.m34 * g.m42 - g.m24 * g.m33 * g.m42 + g.m24 * g.m32 * g.m43 - g.m22 * g.m34 * g.m43 - g.m23 * g.m32 * g.m44 + g.m22 * g.m33 * g.m44;
g.m12 = g.m14 * g.m33 * g.m42 - g.m13 * g.m34 * g.m42 - g.m14 * g.m32 * g.m43 + g.m12 * g.m34 * g.m43 + g.m13 * g.m32 * g.m44 - g.m12 * g.m33 * g.m44;
g.m13 = g.m13 * g.m24 * g.m42 - g.m14 * g.m23 * g.m42 + g.m14 * g.m22 * g.m43 - g.m12 * g.m24 * g.m43 - g.m13 * g.m22 * g.m44 + g.m12 * g.m23 * g.m44;
g.m14 = g.m14 * g.m23 * g.m32 - g.m13 * g.m24 * g.m32 - g.m14 * g.m22 * g.m33 + g.m12 * g.m24 * g.m33 + g.m13 * g.m22 * g.m34 - g.m12 * g.m23 * g.m34;
g.m21 = g.m24 * g.m33 * g.m41 - g.m23 * g.m34 * g.m41 - g.m24 * g.m31 * g.m43 + g.m21 * g.m34 * g.m43 + g.m23 * g.m31 * g.m44 - g.m21 * g.m33 * g.m44;
g.m22 = g.m13 * g.m34 * g.m41 - g.m14 * g.m33 * g.m41 + g.m14 * g.m31 * g.m43 - g.m11 * g.m34 * g.m43 - g.m13 * g.m31 * g.m44 + g.m11 * g.m33 * g.m44;
g.m23 = g.m14 * g.m23 * g.m41 - g.m13 * g.m24 * g.m41 - g.m14 * g.m21 * g.m43 + g.m11 * g.m24 * g.m43 + g.m13 * g.m21 * g.m44 - g.m11 * g.m23 * g.m44;
g.m24 =...