transforms a DOM element by string, matrix or components
MIT License
Applies a CSS transform
to a DOM element's style, accepting a string, array matrix, or discrete components to be recomposed according to CSS3 transform spec. Also handles vendor prefixing.
var transform = require('dom-css-transform')
var div = document.createElement('div')
//typical string style
transform(div, 'translateX(25px) rotateX(25deg)')
//a flat mat2d (9 elements) or mat4 (16 elements) array
var matrix = [0.5, 0, 0, 0.25, 0, 0]
transform(div, matrix)
//results in 3D "matrix3d()"
transform(div, {
scale: [x, y, z],
translate: [x, y, z]
rotate: [x, y, z]
})
//results in 2D "matrix()"
transform(div, {
rotate: [0, 0, -Math.PI],
translate: [-15, 25],
scale: [0.15, 0.5]
})
// result --> "matrix(-0.15, 0, 0, -0.5, -15, 25)"
//reset to identity
transform(div, null)
// result --> "none"
transform(element, opt)
Applies a CSS transform to the given DOM element
, using the specified options. Types supported:
string
like "translateX(25px) rotateZ(25deg)"
or "matrix(0.5,0,0,1,0,0)"
"none"
)When an object is specified, the result is a 4x4 matrix composed by css-mat4. Options:
translate
an array of [x, y]
or [x, y, z]
in pixelsrotate
an array of [x, y, z]
in radiansscale
an array of [x, y]
or [x, y, z]
(z component defaults to 1)skew
an array of [x, y]
in radians for a combined 2D skew matrixskewX
, skewY
numbers in radians to mimic the independent CSS operations by the same namequaternion
can be specified if rotation
is undefined; it's an array of [x, y, z, w]
componentsMIT, see LICENSE.md for details.