JSFiddle - React, Tailwind, and code Playground

by nazarpunk

HTML

<div class="dv d1">non-matrix</div>

<div class="dv d2">matrix</div>

<div class="results"></div>

CSS

.dv {width: 250px; height: 250px; float: left; text-align: center; line-height: 250px; margin: 50px;}

.d1 {background: green; transform: perspective(500px) rotateX(25deg) translateX(150px)}
.d2 {background: red}

.results {float: left; width: 100%}

JavaScript

/**
     * CSSMatrix Shim
     * @constructor
     */
    var CSSMatrix = function(){
      var a = [].slice.call(arguments),
        m = this;
      if (a.length) for (var i = a.length; i--;){
        if (Math.abs(a[i]) < CSSMatrix.SMALL_NUMBER) a[i] = 0;
      }
      m.setIdentity();
      if (a.length == 16){
        m.m11 = m.a = a[0];  m.m12 = m.b = a[1];  m.m13 = a[2];  m.m14 = a[3];
        m.m21 = m.c = a[4];  m.m22 = m.d = a[5];  m.m23 = a[6];  m.m24 = a[7];
        m.m31 = a[8];  m.m32 = a[9];  m.m33 = a[10]; m.m34 = a[11];
        m.m41 = m.e = a[12]; m.m42 = m.f = a[13]; m.m43 = a[14]; m.m44 = a[15];
      } else if (a.length == 6) {
        this.affine = true;
        m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m14 = m.e = a[4];
        m.m21 = m.c = a[2]; m.m22 = m.d = a[3]; m.m24 = m.f = a[5];
      } else if (a.length === 1 && typeof a[0] == 'string') {
        m.setMatrixValue(a[0]);
      } else if (a.length > 0) {
        throw new TypeError('Invalid Matrix Value');
      }
    };

    // decimal values in WebKitCSSMatrix.prototype.toString are truncated to 6 digits
    CSSMatrix.SMALL_NUMBER = 1e-6;

    // Transformations

    // http://en.wikipedia.org/wiki/Rotation_matrix
    CSSMatrix.Rotate = function(rx, ry, rz){
      rx *= Math.PI / 180;
      ry *= Math.PI / 180;
      rz *= Math.PI / 180;
      // minus sin() because of right-handed system
      var cosx = Math.cos(rx), sinx = - Math.sin(rx);
      var cosy = Math.cos(ry), siny = - Math.sin(ry);
      var cosz = Math.cos(rz), sinz = - Math.sin(rz);
      var m = new CSSMatrix();

      m.m11 = m.a = cosy * cosz;
      m.m12 = m.b = - cosy * sinz;
      m.m13 = siny;

      m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
      m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
      m.m23 = - sinx * cosy;

      m.m31 = sinx * sinz - cosx * siny * cosz;
      m.m32 = sinx * cosz + cosx * siny * sinz;
      m.m33 = cosx * cosy;

      return m;
    };

    CSSMatrix.RotateAxisAngle =...