: If init is omitted :: Return the result of invoking create a 2d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with the sequence [''1'', ''0'', ''0'', ''1'', ''0'', ''0'']. : If init is a {{DOMString}} :: 1. If current global object is not a {{Window}} object, then throw a {{TypeError}} exception. 2. Parse init into an abstract matrix, and let matrix and 2dTransform be the result. If the result is failure, then throw a "{{SyntaxError}}" {{DOMException}}. 3.

: If 2dTransform is true :: Return the result of invoking create a 2d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers, the values being the elements m11, m12, m21, m22, m41 and m42 of matrix. : Otherwise :: Return the result of invoking create a 3d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers, the values being the 16 elements of matrix.

: If init is a sequence with 6 elements :: Return the result of invoking create a 2d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with the sequence init. : If init is a sequence with 16 elements :: Return the result of invoking create a 3d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with the sequence init. : Otherwise :: Throw a {{TypeError}} exception.

: If the {{DOMMatrixInit/is2D}} dictionary member of other is true :: Return the result of invoking create a 2d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers, the values being the 6 elements {{DOMMatrix2DInit/m11}}, {{DOMMatrix2DInit/m12}}, {{DOMMatrix2DInit/m21}}, {{DOMMatrix2DInit/m22}}, {{DOMMatrix2DInit/m41}} and {{DOMMatrix2DInit/m42}} of other in the given order. : Otherwise :: Return the result of invoking create a 3d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers, the values being the 16 elements {{DOMMatrix2DInit/m11}}, {{DOMMatrix2DInit/m12}}, {{DOMMatrixInit/m13}}, ..., {{DOMMatrixInit/m44}} of other in the given order.

: If array32 has 6 elements :: Return the result of invoking create a 2d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers taking the values from array32 in the provided order. : If array32 has 16 elements :: Return the result of invoking create a 3d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers taking the values from array32 in the provided order. : Otherwise :: Throw a {{TypeError}} exception.

: If array64 has 6 elements :: Return the result of invoking create a 2d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers taking the values from array64 in the provided order. : If array32 has 16 elements :: Return the result of invoking create a 3d matrix of type {{DOMMatrixReadOnly}} or {{DOMMatrix}} as appropriate, with a sequence of numbers taking the values from array64 in the provided order. : Otherwise :: Throw a {{TypeError}} exception.

: translate(tx, ty, tz) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/translateSelf()}} transformation on result with the arguments tx, ty, tz. 3. Return result. The current matrix is not modified. : scale(scaleX, scaleY, scaleZ, originX, originY, originZ) :: 1. If scaleY is missing, set scaleY to the value of scaleX. 2. Let result be the resulting matrix initialized to the values of the current matrix. 3. Perform a {{DOMMatrix/scaleSelf()}} transformation on result with the arguments scaleX, scaleY, scaleZ, originX, originY, originZ. 4. Return result. The current matrix is not modified. : scaleNonUniform(scaleX, scaleY) :: Note: Supported for legacy reasons to be compatible with {{SVGMatrix}} as defined in SVG 1.1 [[SVG11]]. Authors are encouraged to use {{scale()}} instead. 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/scaleSelf()}} transformation on result with the arguments scaleX, scaleY, 1, 0, 0, 0. 3. Return result. The current matrix is not modified. : scale3d(scale, originX, originY, originZ) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/scale3dSelf()}} transformation on result with the arguments scale, originX, originY, originZ. 3. Return result. The current matrix is not modified. : rotate(rotX, rotY, rotZ) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/rotateSelf()}} transformation on result with the arguments rotX, rotY, rotZ. 3. Return result. The current matrix is not modified. : rotateFromVector(x, y) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/rotateFromVectorSelf()}} transformation on result with the arguments x, y. 3. Return result. The current matrix is not modified. : rotateAxisAngle(x, y, z, angle) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/rotateAxisAngleSelf()}} transformation on result with the arguments x, y, z, angle. 3. Return result. The current matrix is not modified. : skewX(sx) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/skewXSelf()}} transformation on result with the argument sx. 3. Return result. The current matrix is not modified. : skewY(sy) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/skewYSelf()}} transformation on result with the argument sy. 3. Return result. The current matrix is not modified. : multiply(other) :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/multiplySelf()}} transformation on result with the argument other. 3. Return result. The current matrix is not modified. : flipX() :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Post-multiply result with new DOMMatrix([-1, 0, 0, 1, 0, 0]). 3. Return result. The current matrix is not modified. : flipY() :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Post-multiply result with new DOMMatrix([1, 0, 0, -1, 0, 0]). 3. Return result. The current matrix is not modified. : inverse() :: 1. Let result be the resulting matrix initialized to the values of the current matrix. 2. Perform a {{DOMMatrix/invertSelf()}} transformation on result. 3. Return result. The current matrix is not modified.

: transformPoint(point) :: Let pointObject be the result of invoking create a DOMPoint from the dictionary point. Return the result of invoking transform a point with a matrix, given pointObject and the current matrix. The passed argument does not get modified. : toFloat32Array() :: Returns the serialized 16 elements {{DOMMatrixReadOnly/m11}} to {{DOMMatrixReadOnly/m44}} of the current matrix in column-major order as {{Float32Array}}. : toFloat64Array() :: Returns the serialized 16 elements {{DOMMatrixReadOnly/m11}} to {{DOMMatrixReadOnly/m44}} of the current matrix in column-major order as {{Float64Array}}. : stringification behavior :: 1. If one or more of m11 element through m44 element are a non-finite value, then throw an "{{InvalidStateError}}" {{DOMException}}. Note: The CSS syntax cannot represent ''NaN'' or ''Infinity'' values. 2. Let string be the empty string. 3. If is 2D is true, then: 1. Append "matrix(" to string. 2. Append [=!=] [=ToString=](m11 element) to string. 3. Append ", " to string. 4. Append [=!=] [=ToString=](m12 element) to string. 5. Append ", " to string. 6. Append [=!=] [=ToString=](m21 element) to string. 7. Append ", " to string. 8. Append [=!=] [=ToString=](m22 element) to string. 9. Append ", " to string. 10. Append [=!=] [=ToString=](m41 element) to string. 11. Append ", " to string. 12. Append [=!=] [=ToString=](m42 element) to string. 13. Append ")" to string. Note: The string will be in the form of a a CSS Transforms <> function. [[CSS3-TRANSFORMS]] 4. Otherwise: 1. Append "matrix3d(" to string. 2. Append [=!=] [=ToString=](m11 element) to string. 3. Append ", " to string. 4. Append [=!=] [=ToString=](m12 element) to string. 5. Append ", " to string. 6. Append [=!=] [=ToString=](m13 element) to string. 7. Append ", " to string. 8. Append [=!=] [=ToString=](m14 element) to string. 9. Append ", " to string. 10. Append [=!=] [=ToString=](m21 element) to string. 11. Append ", " to string. 12. Append [=!=] [=ToString=](m22 element) to string. 13. Append ", " to string. 14. Append [=!=] [=ToString=](m23 element) to string. 15. Append ", " to string. 16. Append [=!=] [=ToString=](m24 element) to string. 17. Append ", " to string. 18. Append [=!=] [=ToString=](m41 element) to string. 19. Append ", " to string. 20. Append [=!=] [=ToString=](m42 element) to string. 21. Append ", " to string. 22. Append [=!=] [=ToString=](m43 element) to string. 23. Append ", " to string. 24. Append [=!=] [=ToString=](m44 element) to string. 25. Append ")" to string. Note: The string will be in the form of a a CSS Transforms <> function. [[CSS3-TRANSFORMS]] 5. Return string. DOMMatrix-stringifier.html

var matrix = new DOMMatrix();
matrix.scaleSelf(2);
matrix.translateSelf(20,20);
console.assert(matrix.toString() ===
                "matrix(2, 0, 0, 2, 40, 40)");

var matrix = new DOMMatrix();
matrix.scale3dSelf(2);
console.assert(matrix.toString() ===
                "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)");

var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]);
var string = matrix + " Batman!";

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20);
matrix.scaleSelf(2);
matrix.translateSelf(-20, -20);

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20);

: multiplySelf(other) :: 1. Let otherObject be the result of invoking create a DOMMatrix from the dictionary other. 2. The otherObject matrix gets post-multiplied to the current matrix. 3. If is 2D of otherObject is false, set is 2D of the current matrix to false. 4. Return the current matrix. : preMultiplySelf(other) :: 1. Let otherObject be the result of invoking create a DOMMatrix from the dictionary other. 2. The otherObject matrix gets pre-multiplied to the current matrix. 3. If is 2D of otherObject is false, set is 2D of the current matrix to false. 4. Return the current matrix. : translateSelf(tx, ty, tz) :: 1. Post-multiply a translation transformation on the current matrix. The 3D translation matrix is described in CSS Transforms. [[!CSS3-TRANSFORMS]] 2. If tz is specified and not ''0'' or ''-0'', set is 2D of the current matrix to false. 3. Return the current matrix. : scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ) :: 1. Perform a {{DOMMatrix/translateSelf()}} transformation on the current matrix with the arguments originX, originY, originZ. 2. If scaleY is missing, set scaleY to the value of scaleX. 3. Post-multiply a non-uniform scale transformation on the current matrix. The 3D scale matrix is described in CSS Transforms with sx = scaleX, sy = scaleY and sz = scaleZ. [[!CSS3-TRANSFORMS]] 4. Negate originX, originY and originZ. 5. Perform a {{DOMMatrix/translateSelf()}} transformation on the current matrix with the arguments originX, originY, originZ. 6. If scaleZ is not ''1'', set is 2D of the current matrix to false. 7. Return the current matrix. : scale3dSelf(scale, originX, originY, originZ) :: 1. Apply a {{DOMMatrix/translateSelf()}} transformation to the current matrix with the arguments originX, originY, originZ. 2. Post-multiply a uniform 3D scale transformation ({{DOMMatrixReadOnly/m11}} = {{DOMMatrixReadOnly/m22}} = {{DOMMatrixReadOnly/m33}} = scale) on the current matrix. The 3D scale matrix is described in CSS Transforms with sx = sy = sz = scale. [[!CSS3-TRANSFORMS]] 3. Apply a {{DOMMatrix/translateSelf()}} transformation to the current matrix with the arguments -originX, -originY, -originZ. 4. If scale is not ''1'', set is 2D of the current matrix to false. 5. Return the current matrix. : rotateSelf(rotX, rotY, rotZ) :: 1. If rotY and rotZ are both missing, set rotZ to the value of rotX and set rotX and rotY to ''0''. 2. If rotY is still missing, set rotY to ''0''. 3. If rotZ is still missing, set rotZ to ''0''. 4. If rotX or rotY are not ''0'' or ''-0'', set is 2D of the current matrix to false. 5. Post-multiply a rotation transformation on the current matrix around the vector 0, 0, 1 by the specified rotation rotZ in degrees. The 3D rotation matrix is described in CSS Transforms with alpha = rotZ in degrees. [[!CSS3-TRANSFORMS]] 6. Post-multiply a rotation transformation on the current matrix around the vector 0, 1, 0 by the specified rotation rotY in degrees. The 3D rotation matrix is described in CSS Transforms with alpha = rotY in degrees. [[!CSS3-TRANSFORMS]] 7. Post-multiply a rotation transformation on the current matrix around the vector 1, 0, 0 by the specified rotation rotX in degrees. The 3D rotation matrix is described in CSS Transforms with alpha = rotX in degrees. [[!CSS3-TRANSFORMS]] 8. Return the current matrix. : rotateFromVectorSelf(x, y) :: 1. Post-multiply a rotation transformation on the current matrix. The rotation angle is determined by the angle between the vector (1,0)^T and (x,y)^T in the clockwise direction. If x and y should both be ''0'' or ''-0'', the angle is specified as ''0''. The 2D rotation matrix is described in CSS Transforms where alpha is the angle between the vector (1,0)^T and (x,y)^T in degrees. [[!CSS3-TRANSFORMS]] 2. Return the current matrix. : rotateAxisAngleSelf(x, y, z, angle) :: 1. Post-multiply a rotation transformation on the current matrix around the specified vector x, y, z by the specified rotation angle in degrees. The 3D rotation matrix is described in CSS Transforms with alpha = angle in degrees. [[!CSS3-TRANSFORMS]] 2. If x or y are not ''0'' or ''-0'', set is 2D of the current matrix to false. 3. Return the current matrix. : skewXSelf(sx) :: 1. Post-multiply a skewX transformation on the current matrix by the specified angle sx in degrees. The 2D skewX matrix is described in CSS Transforms with alpha = sx in degrees. [[!CSS3-TRANSFORMS]] 2. Return the current matrix. : skewYSelf(sy) :: 1. Post-multiply a skewX transformation on the current matrix by the specified angle sy in degrees. The 2D skewY matrix is described in CSS Transforms with beta = sy in degrees. [[!CSS3-TRANSFORMS]] 2. Return the current matrix. : invertSelf() :: 1. Invert the current matrix. 2. If the current matrix is not invertible set all attributes to ''NaN'' and set is 2D to false. 3. Return the current matrix. DOMMatrix-invert-invertible.html DOMMatrix-invert-non-invertible.html DOMMatrix-invert-preserves-2d.html DOMMatrix-invertSelf.html : setMatrixValue(transformList) :: 1. Parse transformList into an abstract matrix, and let matrix and 2dTransform be the result. If the result is failure, then throw a "{{SyntaxError}}" {{DOMException}}. 2. Set is 2D to the value of 2dTransform. 3. Set m11 element through m44 element to the element values of matrix in column-major order. 4. Return the current matrix. DOMMatrix-css-string.worker.js

Structured serialization

Document conventions

Changes since last publication

Acknowledgments