css-mat4

Build a 4x4 matrix from 3D rotation, translation, scale and 2D skew according to the CSS3 transforms spec.

var compose = require('css-mat4')
var matrix = compose([], {
    translate: [25, 15, 25],
    rotate: [0, Math.PI/2, -Math.PI],
    scale: [0.25, 0.4, 1.0],
    skewX: Math.PI/2,
    skewY: Math.PI/2
})
 
//now you can do something with the 16-float matrix array...

Components default to zero (or one in the case of scale) to allow for 2D vectors:

compose(out, {
    translate: [50, 15],
    scale: [0.25, 0.4]
})

Usage

matrix = compose(out[, opt])

Composes a matrix from the given components, storing the result in out and returning it. If opt is not specified, an identity matrix is returned.

The options:

• translate an array of [x, y] or [x, y, z] in pixels
• rotate an array of [x, y, z] in radians
• scale an array of [x, y] or [x, y, z] (z component defaults to 1)
• quaternion can be specified if rotate is undefined; it's an array of [x, y, z, w] components
• skew an array of [x, y] in radians, akin to the CSS skew(x,y) operation, which applies the skew together
• skewX, skewY numbers in radians, allowing the skews to be applied independently

The order of operations:

Builds a translation matrix, then applies the quaternion rotation. The matrix is then multiplied a 2D skew(x,y) matrix, and then multiplied by the independent X and Y skew matrices. Finally multiplied by scale to get the resulting recomposed matrix.

License

MIT, see LICENSE.md for details.