Matrix3 Manipulation

Recently, fascinating on Matrix.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .box {
      width: 500px;
      height: 400px;
      background-color: lightgray;
    }

.content {
      width: 120px;
      height: 120px;
      background-color: #333;
      transform-origin: left top;
      color: blue;
      font-size: 30px;
      line-height: 120px;
      text-align: center;
    	background-image: url(https://source.unsplash.com/120x120);
    }
  </style>
</head>

b11 = b[0], b12 = b[1], b13 = b[2],
        b21 = b[3], b22 = b[4], b23 = b[5],
        b31 = b[6], b32 = b[7], b33 = b[8];

var c11 = a11 * b11 + a12 * b21 + a13 * b31;
    var c12 = a11 * b12 + a12 * b22 + a13 * b32;
    var c13 = a11 * b13 + a12 * b23 + a13 * b33;

var c21 = a21 * b11 + a22 * b21 + a23 * b31;
    var c22 = a21 * b12 + a22 * b22 + a23 * b32;
    var c23 = a21 * b13 + a22 * b23 + a23 * b33;

var c31 = a31 * b11 + a32 * b21 + a33 * b31;
    var c32 = a31 * b12 + a32 * b22 + a33 * b32;
    var c33 = a31 * b13 + a32 * b23 + a33 * b33;

this.elements = [
        c11, c12, c13,
        c21, c22, c23,
        c31, c32, c33
    ];
    return this;
};
Matrix3.prototype.toArray = function () {
    return this.elements;
};
Matrix3.prototype.to2DMatrix = function () {
    var a = this.elements;
    return [a[0], a[3], a[1], a[4], a[2], a[5]];
};

Matrix3.translate = function (tx, ty) {
    return new Matrix3([
        1, 0, tx,
        0, 1, ty,
        0, 0, 1
    ]);
};
Matrix3.scale = function (s) {
    return new Matrix3([
        s, 0, 0,
        0, s, 0,
        0, 0, 1
    ]);
};
Matrix3.rotate = function (rad) {
    var s = Math.sin(rad);
    var c = Math.cos(rad);
    return new Matrix3([
        c, -s, 0,
        s, c, 0,
        0, 0, 1
    ]);
};
  
  
  
  
var m = new Matrix3();
var config = {
  tx: 100, ty: 50,
  scale: 1.5,
  rad: 35
}
var target = document.getElementById("target");

function evt () {
  var res = m.identity()
    .multiply(Matrix3.translate(config.tx, config.ty))
    .multiply(Matrix3.rotate(config.rad * Math.PI / 180))
    .multiply(Matrix3.scale(config.scale))
    .to2DMatrix();
  target.style.transform = "matrix(" + res.join(",") + ")";
}
var gui = new dat.GUI();
gui.add(config, "tx", 0, 600).onChange(evt);
gui.add(config, "ty", 0, 400).onChange(evt);
gui.add(config, "scale", 0.2, 2).onChange(evt);
gui.add(config, "rad", 0, 360).onChange(evt);

evt();

</script>

</body>

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js