dom-css-transform
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 = var div = document //typical string style //a flat mat2d (9 elements) or mat4 (16 elements) arrayvar matrix = 05 0 0 025 0 0 //results in 3D "matrix3d()" //results in 2D "matrix()"// result --> "matrix(-0.15, 0, 0, -0.5, -15, 25)" //reset to identity// result --> "none"
Usage
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)"
- array of 16 elements (4x4 matrix) or 9 elements (3x2 matrix for 2D transformations)
- an object with discrete components.
- null or undefined, which leads to identity transform (i.e.
"none"
)
When an object is specified, the reuslt 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 ifrotation
is undefined; it's an array of[x, y, z, w]
components
License
MIT, see LICENSE.md for details.