Usage

The initialization doesn't support CSS syntax strings with transform functions like rotate() or translate() only matrix() and matrix3d(), or 6/16 elements arrays.

Basics

// ES6+
import CSSMatrix from 'dommatrix'

// init
let myMatrix = new CSSMatrix('matrix(1,0.25,-0.25,1,0,0)')

OR

// Node.js
var CSSMatrix = require('dommatrix');

// init
let myMatrix = new CSSMatrix('matrix(1,0.25,-0.25,1,0,0)')

Advanced API Examples

Provide Values on Initialization

// the above are equivalent with providing the values are arguments
let myMatrix = new CSSMatrix(1,0.25,-0.25,1,0,0)

// or by providing an Array, Float32Array, Float64Array
let myMatrix = new CSSMatrix([1,0.25,-0.25,1,0,0])

Use Static Methods to Initialize

let myTranlateMatrix = new CSSMatrix(1,0,0,1,150,150)

// fromMatrix will create a clone of the above matrix
let myMatrix = CSSMatrix.fromMatrix(myTranlateMatrix)

// create a new CSSMatrix from an Array, Float32Array, Float64Array
let myMatrix = CSSMatrix.fromArray([1,0.25,-0.25,1,0,0])

Using Main Methods

// call methods to apply transformations
let myMatrix = new CSSMatrix().translate(15)

// equivalent to 
let myMatrix = new CSSMatrix().translate(15,0)

// equivalent to 
let myMatrix = new CSSMatrix().translate(15,0,0)

// rotations work as expected
let myMatrix = new CSSMatrix().rotate(15)

// equivalent to 
let myMatrix = new CSSMatrix().rotate(0,0,15)

Manipulate The Matrix values

// reset the matrix to identity form
// the equivalent of the CSS "transform: none"
myMatrix.setIdentity()

// replace existing matrix with values from array
// it's best to use the above setIdentity() before
// replacing the current matrix or feed from a 16 values Array
CSSMatrix.feedFromArray(myMatrix, [1,0.25,-0.25,1,0,0])

// replace existing matrix with values from array
// as if your're re-initializing the matrix
myMatrix.setMatrixValue(1,0.25,-0.25,1,0,0)

// apply additional transformations to an existing matrix
// by calling instance methods
myMatrix = myMatrix.translate(15).skewX(45)

// apply additional transformations to an existing matrix
// by calling a static method to create a new matrix;
// the result of the multiply instance method and
// the result of the Rotate static method combined create
// a third CSSMatrix instance that replaces the original
// matrix entirely
myMatrix = myMatrix.multiply(CSSMatrix.Rotate(0,45))

Calling the transform function instance methods (translate,rotate) after initialization will not change the instance Object unless you put the "=" sign between your instance name and the return of the call. Only setIdentity and setMatrixValue instance methods as well as the feedFromArray static method can do that.

Exporting The Matrix

// export to the CSS syntax transform
let myMatrix = new CSSMatrix().translate(15).toString()

// export to Array
let myMatrix = new CSSMatrix().rotate(45).toArray()

// if the matrix is 3D you can also export a transposed matrix array
// which is compatible with the CSS syntax row major order representation
let myMatrix = new CSSMatrix().translate(15,0,0).toArray(true)

Adding Perspective To Matrix

import CSSMatrix from 'dommatrix'

// perspective
let perspective = 400

// init
let myMatrix = new CSSMatrix()

// set perspective
myMatrix.m34  = -1/perspective

// now your matrix is always 3D
// we can apply any 3D transformation
myMatrix = myMatrix.rotate(45,0,0)

// this matrix is now equivalent with this
// CSS transformation syntax
// perspective(400px) rotateX(45deg)