New pages: DOMMatrix.<transformfunctions>()

files/en-us/web/api/dommatrix/index.md

@@ -1,5 +1,5 @@
 ---
-title: DOMMatrix (WebKitCSSMatrix)
+title: DOMMatrix
 slug: Web/API/DOMMatrix
 page-type: web-api-interface
 browser-compat: api.DOMMatrix
@@ -8,11 +8,10 @@ browser-compat: api.DOMMatrix
 {{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
 
 The **`DOMMatrix`** interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the {{domxref("DOMMatrixReadOnly")}} interface.
+The interface is available inside [web workers](/en-US/docs/Web/API/Web_Workers_API).
 
 **`WebKitCSSMatrix`** and **`SVGMatrix`** are aliases to **`DOMMatrix`**.
 
-This interface should be available inside [web workers](/en-US/docs/Web/API/Web_Workers_API), though some implementations don't allow it yet.
-
 {{InheritanceDiagram}}
 
 ## Constructor

files/en-us/web/api/dommatrix/rotateself/index.md

@@ -0,0 +1,74 @@
+---
+title: "DOMMatrix: rotateSelf() method"
+short-title: rotateSelf()
+slug: Web/API/DOMMatrix/rotateSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.rotateSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `rotateSelf()` method of the {{domxref("DOMMatrix")}} interface is a mutable transformation method that modifies a matrix. It rotates the source matrix around each of its axes by the specified number of degrees and returns the rotated matrix.
+
+To rotate a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.rotate()")}}
+
+## Syntax
+
+```js-nolint
+DOMMatrix.rotateSelf()
+DOMMatrix.rotateSelf(rotX)
+DOMMatrix.rotateSelf(rotX, rotY)
+DOMMatrix.rotateSelf(rotX, rotY, rotZ)
+```
+
+### Parameters
+
+- `rotX`
+  - : A number; the x-coordinate of the vector denoting the axis of rotation
+- `rotY` {{optional_inline}}
+  - : A number; the y-coordinate of the vector denoting the axis of rotation.
+- `rotZ` {{optional_inline}}
+  - : A number; the z-coordinate of the vector denoting the axis of rotation
+
+If only one parameter is passed, `rotZ` is the value of `rotX`, and both `rotx` and `rotY` are `0`, and the rotation is a 2D rotation. If `rotX` and `rotY` are non-zero, the [`is_2d`](/en-US/docs/Web/API/DOMMatrix#is2d) is `false`.
+
+### Return value
+
+Returns itself; the [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) rotated by the given
+vectors.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.toString()); // output: "matrix(1, 0, 0, 1, 0, 0)"
+matrix.rotateSelf(30); // mutate it
+console.log(matrix); // output: "matrix(0.866, 0.5, -0.5, 0.866, 0, 0)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.rotate()")}}
+- CSS {{cssxref("transform")}} property
+- CSS {{cssxref("rotate")}} property
+- CSS {{cssxref("transform-function")}} functions
+  - {{cssxref("transform-function/rotate", "rotate()")}}
+  - {{cssxref("transform-function/rotate3d", "rotate3d()")}}
+  - {{cssxref("transform-function/rotateX", "rotateX()")}}
+  - {{cssxref("transform-function/rotateY", "rotateY()")}}
+  - {{cssxref("transform-function/rotateZ", "rotateZ()")}}
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface methods
+  - {{domxref("CanvasRenderingContext2D.rotate()")}}
+  - {{domxref("CanvasRenderingContext2D.transform()")}}
+  - {{domxref("CanvasRenderingContext2D.setTransform()")}}
+  - {{domxref("CanvasRenderingContext2D.resetTransform()")}}

files/en-us/web/api/dommatrix/skewxself/index.md

@@ -0,0 +1,63 @@
+---
+title: "DOMMatrix: skewXSelf() method"
+short-title: skewXSelf()
+slug: Web/API/DOMMatrix/skewXSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.skewXSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `skewXSelf()` method of the {{domxref("DOMMatrix")}} interface is a mutable transformation method that modifies a matrix. It skews the source matrix by applying the specified skew transformation along the X-axis and returns the skewed matrix.
+
+To skew a matrix along the X-axis without mutating it, see {{domxref("DOMMatrixReadOnly.skewX()")}}
+
+## Syntax
+
+```js-nolint
+DOMMatrix.skewXSelf()
+DOMMatrix.skewXSelf(sX)
+```
+
+### Parameters
+
+- `sX`
+  - : A number; the angle, in degrees, by which to skew the matrix along the X axis.
+
+### Return value
+
+Returns itself; the [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) skewed along the X-axis by the given
+angle.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.toString()); // output: "matrix(1, 0, 0, 1, 0, 0)"
+matrix.skewXSelf(14); // mutate it
+console.log(matrix); // output: "matrix(1, 0, 0.25, 1, 0, 0)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.skewX()")}}
+- CSS {{cssxref("transform")}} property
+- CSS {{cssxref("transform-function")}} functions
+  - {{cssxref("transform-function/skew", "skew()")}}
+  - {{cssxref("transform-function/skewX", "skewX()")}}
+  - {{cssxref("transform-function/skewY", "skewY()")}}
+  - {{cssxref("transform-function/skewZ", "skewZ()")}}
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface methods
+  - {{domxref("CanvasRenderingContext2D.transform()")}}
+  - {{domxref("CanvasRenderingContext2D.setTransform()")}}
+  - {{domxref("CanvasRenderingContext2D.resetTransform()")}}

files/en-us/web/api/dommatrix/skewyself/index.md

@@ -0,0 +1,63 @@
+---
+title: "DOMMatrix: skewYSelf() method"
+short-title: skewYSelf()
+slug: Web/API/DOMMatrix/skewYSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.skewYSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `skewYSelf()` method of the {{domxref("DOMMatrix")}} interface is a mutable transformation method that modifies a matrix. It skews the source matrix by applying the specified skew transformation along the Y-axis and returns the skewed matrix.
+
+To skew a matrix along the Y-axis without mutating it, see {{domxref("DOMMatrixReadOnly.skewY()")}}
+
+## Syntax
+
+```js-nolint
+DOMMatrix.skewYSelf()
+DOMMatrix.skewYSelf(sY)
+```
+
+### Parameters
+
+- `sY`
+  - : A number; the angle, in degrees, by which to skew the matrix along the Y axis.
+
+### Return value
+
+Returns itself; the [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) skewed along the Y-axis by the given
+angle.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.toString()); // output: "matrix(1, 0, 0, 1, 0, 0)"
+matrix.skewYSelf(-14); // mutate it
+console.log(matrix); // output: "matrix(1, -0.25, 0, 1, 0, 0)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.skewY()")}}
+- CSS {{cssxref("transform")}} property
+- CSS {{cssxref("transform-function")}} functions
+  - {{cssxref("transform-function/skew", "skew()")}}
+  - {{cssxref("transform-function/skewX", "skewX()")}}
+  - {{cssxref("transform-function/skewY", "skewY()")}}
+  - {{cssxref("transform-function/skewZ", "skewZ()")}}
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface methods
+  - {{domxref("CanvasRenderingContext2D.transform()")}}
+  - {{domxref("CanvasRenderingContext2D.setTransform()")}}
+  - {{domxref("CanvasRenderingContext2D.resetTransform()")}}

files/en-us/web/api/dommatrix/translateself/index.md

@@ -0,0 +1,72 @@
+---
+title: "DOMMatrix: translateSelf() method"
+short-title: translateSelf()
+slug: Web/API/DOMMatrix/translateSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.translateSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `translateSelf()` method of the {{domxref("DOMMatrix")}} interface is a mutable transformation method that modifies a matrix. It applies the specified vectors and returns the updated matrix. The default vector is `[0, 0, 0]`.
+
+To translate a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.translate()")}}
+
+## Syntax
+
+```js-nolint
+DOMMatrix.translateSelf(translateX, translateY)
+DOMMatrix.translateSelf(translateX, translateY, translateZ)
+```
+
+### Parameters
+
+- `translateX`
+  - : A number representing the abscissa (x-coordinate) of the translating vector.
+- `translateY`
+  - : A number representing the ordinate (y-coordinate) of the translating vector.
+- `translateZ` {{optional_inline}}
+  - : A number representing the z component of the translating vector. If not supplied,
+    this defaults to 0. If this is anything other than 0, the resulting matrix will be
+    3D.
+
+### Return value
+
+Returns itself; the [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) translated by the given
+vector.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.toString()); // output: "matrix(1, 0, 0, 1, 0, 0)"
+matrix.translateSelf(25, 25); // mutate it
+console.log(matrix); // output: "matrix(1, 0, 0, 1, 25, 25)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.translate()")}}
+- CSS {{cssxref("transform")}} property
+- CSS {{cssxref("translate")}} property
+- CSS {{cssxref("transform-function")}} functions
+  - {{cssxref("transform-function/translate", "translate()")}}
+  - {{cssxref("transform-function/translate3d", "translate3d()")}}
+  - {{cssxref("transform-function/translateX", "translateX()")}}
+  - {{cssxref("transform-function/translateY", "translateY()")}}
+  - {{cssxref("transform-function/translateZ", "translateZ()")}}
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface methods
+  - {{domxref("CanvasRenderingContext2D.translate()")}}
+  - {{domxref("CanvasRenderingContext2D.transform()")}}
+  - {{domxref("CanvasRenderingContext2D.setTransform()")}}
+  - {{domxref("CanvasRenderingContext2D.resetTransform()")}}