CSSMatrix2d Class
This represents the matrix used by 2d CSS transforms. It helps perform all of the necessary matrix calculations. This is sort of an implementation of the CSSMatrix object defined in this spec: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface The matrix defined in the spec is a 3x2 matrix. I'm not exactly an expert at matrix math, but most of the operations required by the spec only work with square matrices. The spec doesn't explain how a 3x2 matrix is supposed to do these things. In order to make the math work correctly, this object internally treats it as the 4x4 matrix defined in the 3d CSS transforms spec here: http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface and it converts the 3x2 matrix into a 4x4 matrix by following the examples provided in this spec: http://www.w3.org/TR/2012/WD-css3-transforms-20120403/ Other implementations of these specs, like the WebKitCSSMatrix object and others that have copied it, attempt to combine both the 2d and 3d versions of CSSMatrix into the same object. This implementation only borrows ideas from the 3d version to make the math make sense, but only the 2d functionality is implemented. Since only the 6 2d matrix items out of the total 16 3d matrix items are mutable, and the remaining 3d matrix items are known to be either 0 or 1, most of the complicated 4x4 matrix math is factored down and reduced, becoming much more efficient.
Constructor
CSSMatrix2d
()
Item Index
Methods
Methods
inverse
()
CSSMatrix2d
Returns a new matrix, the inverse of this one. This matrix is not modified. This method will throw if the matrix can not be inverted.
Returns:
multiply
-
other
Returns a new matrix, the product of this one multiplied by another one. Neither this matrix nor the other one is modified.
Parameters:
-
otherCSSMatrix2d
Returns:
rotate
-
angle
Returns a new matrix, rotated the given angle clockwise. This matrix is not modified.
Parameters:
-
angleNumberThe angle specified in degrees.
Returns:
rotateRad
-
angle
Returns a new matrix, rotated the given angle clockwise. This matrix is not modified.
Parameters:
-
angleNumberThe angle specified in radians.
Returns:
scale
-
x -
y
Returns a new matrix, scaled horizontally and vertically. This matrix is not modified.
Parameters:
Returns:
setMatrixValue
-
matrixValue
Sets the matrix based on a matrix string provided by the DOM. The string is expected to be like 'matrix(a, b, c, d, e, f)'. This format isn't specifically checked for, so other similar strings might be accepted. If 6 values can not be read from from the string, this method will do nothing. Invalid values could result in NaN being assigned to matrix items.
Parameters:
-
matrixValueString
skewX
-
angle
Returns a new matrix, skewed horizontally. This matrix is not modified.
Parameters:
-
angleNumberThe horizontal skew angle specified in degrees.
Returns:
skewXRad
-
angle
Returns a new matrix, skewed horizontally. This matrix is not modified.
Parameters:
-
angleNumberThe horizontal skew angle specified in radians.
Returns:
skewY
-
angle
Returns a new matrix, skewed vertically. This matrix is not modified.
Parameters:
-
angleNumberThe vertical skew angle specified in degrees.
Returns:
skewYRad
-
angle
Returns a new matrix, skewed vertically. This matrix is not modified.
Parameters:
-
angleNumberThe vertical skew angle specified in radians.
Returns:
toString
()
String
Returns a string 'matrix(a, b, c, d, e, f)' which can be used by the DOM for 2d CSS transforms.
Returns:
translate
-
x -
y
Returns a new matrix, translated horizontally and vertically. This matrix is not modified.