JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/35892678/

HTML

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

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

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

CSS

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

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

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

JavaScript

// PLEASE SCROLL DOWN

/**
* 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-20;

// 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 = function(x, y, z, angle){
  angle *= Math.PI / 360;

  var sinA = Math.sin(angle), cosA = Math.cos(angle), sinA2 = sinA * sinA;
  var length = Math.sqrt(x * x + y * y + z * z);

  if...