New pages: DOMMatrixReadOnly.skewX/skewY/rotate (#37152)

* New pages: DOMMatrixReadOnly.skewX/skewY/rotate * New pages: dommatrix scale3D * typo * typo * rotateaxisangle and rotatefromvector * typo * Update index.md * return value and typo * return value * Update index.md * Update index.md * Update index.md * return * return * return value * Update index.md * Edits per review * Edits per review * Edits per review * Edits per review * Edits per review * Edits per review * Edits per review * edits * moved * nits * nits * Update files/en-us/web/api/dommatrixreadonly/rotate/index.md * Update files/en-us/web/api/dommatrix/scale3dself/index.md * prettify matrix3d * Update files/en-us/web/api/dommatrixreadonly/rotateaxisangle/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/dommatrixreadonly/rotateaxisangle/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: wbamberg <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
mdn · Jan 30, 2025 · e65acfe · e65acfe
1 parent ebf665a
commit e65acfe
Show file tree

Hide file tree

Showing 9 changed files with 639 additions and 0 deletions.
diff --git a/files/en-us/web/api/dommatrix/rotateaxisangleself/index.md b/files/en-us/web/api/dommatrix/rotateaxisangleself/index.md
@@ -0,0 +1,77 @@
+---
+title: "DOMMatrix: rotateAxisAngleSelf() method"
+short-title: rotateAxisAngleSelf()
+slug: Web/API/DOMMatrix/rotateAxisAngleSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.rotateAxisAngleSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `rotateAxisAngleSelf()` method of the {{domxref("DOMMatrix")}} interface is a transformation method that rotates the source matrix by the given vector and angle, returning the altered matrix.
+
+To rotate a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}}, which creates a new rotated matrix while leaving the original unchanged.
+
+## Syntax
+
+```js-nolint
+DOMMatrix.rotateAxisAngleSelf()
+DOMMatrix.rotateAxisAngleSelf(rotX)
+DOMMatrix.rotateAxisAngleSelf(rotX, rotY)
+DOMMatrix.rotateAxisAngleSelf(rotX, rotY, rotZ)
+DOMMatrix.rotateAxisAngleSelf(rotX, rotY, rotZ, angle)
+```
+
+### Parameters
+
+- `rotX`
+  - : A number; the x-coordinate of the vector denoting the axis of rotation. If non-zero, {{domxref("DOMMatrix.is2d", "is2D")}} is false.
+- `rotY` {{optional_inline}}
+  - : A number; the y-coordinate of the vector denoting the axis of rotation. If undefined, the `rotX` value is used. If non-zero, {{domxref("DOMMatrix.is2d", "is2D")}} is false.
+- `rotZ` {{optional_inline}}
+  - : A number; the z-coordinate of the vector denoting the axis of rotation. If undefined, the `rotX` value is used.
+- `angle` {{optional_inline}}
+  - : A number; the angle of the rotation around the axis vector, in degrees.
+
+If `rotY` and `rotZ` are both missing, `rotZ` is set to the value of `rotX`, and both `rotX` and `rotY` are `0`.
+
+### Return value
+
+A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix).
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.rotateAxisAngleSelf(10, 20, 30, 45).toString());
+/* "matrix3d(
+    0.728, 0.609, -0.315, 0, 
+    -0.525, 0.791, 0.315, 0, 
+    0.441, -0.063, 0.895, 
+    0, 0, 0, 0, 1)" */
+console.log(matrix.toString());
+/* "matrix3d(
+    0.728, 0.609, -0.315, 0, 
+    -0.525, 0.791, 0.315, 0, 
+    0.441, -0.063, 0.895, 0, 
+    0, 0, 0, 1)" */
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}}
+- {{domxref("DOMMatrix.rotateSelf()")}}
+- {{domxref("DOMMatrix.rotateFromVectorSelf()")}}
+- CSS {{cssxref("transform")}} property and {{cssxref("transform-function/rotate3d", "rotate3d()")}} function
+- CSS {{cssxref("rotate")}} property
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface and {{domxref("CanvasRenderingContext2D.rotate()", "rotate()")}} method
diff --git a/files/en-us/web/api/dommatrix/rotatefromvectorself/index.md b/files/en-us/web/api/dommatrix/rotatefromvectorself/index.md
@@ -0,0 +1,63 @@
+---
+title: "DOMMatrix: rotateFromVectorSelf() method"
+short-title: rotateFromVectorSelf()
+slug: Web/API/DOMMatrix/rotateFromVectorSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.rotateFromVectorSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `rotateFromVectorSelf()` method of the {{domxref("DOMMatrix")}} interface is a mutable transformation method that modifies a matrix by rotating the matrix by the angle between the specified vector and `(1, 0)`. The rotation angle is determined by the angle between the vector `(1,0)T` and `(x,y)T` in the clockwise direction, or `(+/-)arctan(y/x)`. If `x` and `y` are both `0`, the angle is specified as `0`, and the matrix is not altered.
+
+To rotate a matrix from a vector without mutating it, see {{domxref("DOMMatrixReadOnly.rotateFromVector()")}}, which creates a new rotated matrix while leaving the original unchanged.
+
+## Syntax
+
+```js-nolint
+DOMMatrix.rotateFromVectorSelf()
+DOMMatrix.rotateFromVectorSelf(rotX)
+DOMMatrix.rotateFromVectorSelf(rotX, rotY)
+```
+
+### Parameters
+
+- `rotX` {{optional_inline}}
+  - : A number; The x-coordinate of x,y vector that determines the rotation angle. If undefined, `0` is used.
+- `rotY` {{optional_inline}}
+  - : A number; The y-coordinate of x,y vector that determines the rotation angle. If undefined, `0` is used.
+
+### Return value
+
+Returns itself; the updated [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix).
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.rotateFromVectorSelf().toString());
+// output: matrix(1, 0, 0, 1, 0, 0) (no rotation applied)
+console.log(matrix.rotateFromVectorSelf(10, 20).toString());
+// output: matrix(0.447, 0.894, -0.894, 0.447, 0, 0)
+console.log(matrix.toString());
+// output: matrix(0.447, 0.894, -0.894, 0.447, 0, 0) (same as above)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.rotateFromVector()")}}
+- {{domxref("DOMMatrixRead.rotateSelf()")}}
+- {{domxref("DOMMatrixRead.rotateAxisAngleSelf()")}}
+- CSS {{cssxref("transform")}} property and {{cssxref("transform-function/rotate3d", "rotate3d()")}} function
+- CSS {{cssxref("rotate")}} property
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface and {{domxref("CanvasRenderingContext2D.rotate()", "rotate()")}} method
diff --git a/files/en-us/web/api/dommatrix/scale3dself/index.md b/files/en-us/web/api/dommatrix/scale3dself/index.md
@@ -0,0 +1,81 @@
+---
+title: "DOMMatrix: scale3dSelf() method"
+short-title: scale3dSelf()
+slug: Web/API/DOMMatrix/scale3dSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.scale3dSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`scale3dSelf()`** method of the {{domxref("DOMMatrix")}} interface is a mutable transformation method that modifies a matrix by applying a specified scaling factor to all three axes, centered on the given origin, with a default origin of `(0, 0, 0)`, returning the 3D-scaled matrix.
+
+To 3D-scale a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.scale3d()")}}, which creates a new scaled matrix while leaving the original unchanged.
+
+## Syntax
+
+The `scale3dSelf()` method is specified with zero to four values.
+
+```js
+DOMMatrix.scale3dSelf();
+DOMMatrix.scale3dSelf(scale);
+DOMMatrix.scale3dSelf(scale, originX);
+DOMMatrix.scale3dSelf(scale, originX, originY);
+DOMMatrix.scale3dSelf(scale, originX, originY, originZ);
+```
+
+### Parameters
+
+- `scale`
+  - : A multiplier; the scale value. If no scale is supplied, this defaults to `1`. If scale is not 1, the {{domxref("DOMMatrixReadOnly.is2D", "is2D")}} property of the current matrix is set to `false`.
+- `originX` {{optional_inline}}
+  - : An x-coordinate for the origin of the transformation. If no origin is supplied, this defaults to `0`.
+- `originY` {{optional_inline}}
+  - : A y-coordinate for the origin of the transformation. If no origin is supplied, this defaults to `0`.
+- `originZ` {{optional_inline}}
+  - : A z-coordinate for the origin of the transformation. If no origin is supplied, this defaults to `0`.
+
+### Return value
+
+Returns itself; a {{domxref("DOMMatrix")}}.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix();
+console.log(matrix.scale3dSelf(2).toString());
+/* matrix3d(
+    2, 0, 0, 0, 
+    0, 2, 0, 0, 
+    0, 0, 2, 0, 
+    0, 0, 0, 1) */
+console.log(matrix.scale3dSelf(3.1, 25, 25, 1.25).toString());
+/* matrix3d(
+    6.2, 0, 0, 0,
+    0, 6.2, 0, 0, 
+    0, 0, 6.2, 0, 
+    -105, -105, -5.25, 1) */
+console.log(matrix.toString());
+/* matrix3d(
+    6.2, 0, 0, 0, 
+    0, 6.2, 0, 0, 
+    0, 0, 6.2, 0, 
+    -105, -105, -5.25, 1) (same as above) */
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.scale3d()")}}
+- {{domxref("DOMMatrix.scaleSelf()")}}
+- CSS {{cssxref("transform")}} property and the {{cssxref("transform-function/scale", "scale3d()")}} and {{cssxref("transform-function/matrix3d", "matrix3d()")}} functions
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface {{domxref("CanvasRenderingContext2D.transform()", "transform()")}} method
diff --git a/files/en-us/web/api/dommatrixreadonly/rotate/index.md b/files/en-us/web/api/dommatrixreadonly/rotate/index.md
@@ -0,0 +1,70 @@
+---
+title: "DOMMatrixReadOnly: rotate() method"
+short-title: rotate()
+slug: Web/API/DOMMatrixReadOnly/rotate
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.rotate
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `rotate()` method of the {{domxref("DOMMatrixReadOnly")}} interface returns a new {{domxref("DOMMatrix")}} created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered.
+
+To mutate the matrix as you rotate it, see {{domxref("DOMMatrix.rotateSelf()")}}.
+
+## Syntax
+
+```js-nolint
+DOMMatrixReadOnly.rotate()
+DOMMatrixReadOnly.rotate(rotX)
+DOMMatrixReadOnly.rotate(rotX, rotY)
+DOMMatrixReadOnly.rotate(rotX, rotY, rotZ)
+```
+
+### Parameters
+
+- `rotX`
+  - : A number; the x-coordinate of the vector denoting the axis of rotation. If non-zero, [`is2D`](/en-US/docs/Web/API/DOMMatrix#is2d) is false.
+- `rotY` {{optional_inline}}
+  - : A number; the y-coordinate of the vector denoting the axis of rotation. If non-zero, [`is2D`](/en-US/docs/Web/API/DOMMatrix#is2d) is false.
+- `rotZ` {{optional_inline}}
+  - : A number; the z-coordinate of the vector denoting the axis of rotation.
+
+If only `rotX` is passed, then `rotX` is used as the value for the z-coordinate, and the x- and -y-coordinates are both set to zero.
+
+### Return value
+
+A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix).
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.toString());
+// output: "matrix(1, 0, 0, 1, 0, 0)"
+
+const rotated = matrix.rotate(30); // rotation and assignment
+console.log(matrix.toString()); // original matrix is unchanged
+// output: "matrix(1, 0, 0, 1, 0, 0)"
+console.log(rotated.toString());
+// output: "matrix(0.866, 0.5, -0.5, 0.866, 0, 0)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix.rotateSelf()")}}
+- {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}}
+- {{domxref("DOMMatrixReadOnly.rotateFromVector()")}}
+- CSS {{cssxref("transform")}} property and {{cssxref("transform-function/rotate3d", "rotate3d()")}} function
+- CSS {{cssxref("rotate")}} property
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface and {{domxref("CanvasRenderingContext2D.rotate()", "rotate()")}} method
diff --git a/files/en-us/web/api/dommatrixreadonly/rotateaxisangle/index.md b/files/en-us/web/api/dommatrixreadonly/rotateaxisangle/index.md
@@ -0,0 +1,78 @@
+---
+title: "DOMMatrixReadOnly: rotateAxisAngle() method"
+short-title: rotateAxisAngle()
+slug: Web/API/DOMMatrixReadOnly/rotateAxisAngle
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.rotateAxisAngle
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The `rotateAxisAngle()` method of the {{domxref("DOMMatrixReadOnly")}} interface returns a new {{domxref("DOMMatrix")}} created by rotating the source matrix by the given vector and angle. The original matrix is not altered.
+
+To mutate the matrix as you rotate it, see {{domxref("DOMMatrix.rotateAxisAngleSelf()")}}.
+
+## Syntax
+
+```js-nolint
+DOMMatrixReadOnly.rotateAxisAngle()
+DOMMatrixReadOnly.rotateAxisAngle(rotX)
+DOMMatrixReadOnly.rotateAxisAngle(rotX, rotY)
+DOMMatrixReadOnly.rotateAxisAngle(rotX, rotY, rotZ)
+DOMMatrixReadOnly.rotateAxisAngle(rotX, rotY, rotZ, angle)
+```
+
+### Parameters
+
+- `rotX`
+  - : A number; the x-coordinate of the vector denoting the axis of rotation. If non-zero, {{domxref("DOMMatrixReadOnly.is2D", "is2D")}} is false.
+- `rotY` {{optional_inline}}
+  - : A number; the y-coordinate of the vector denoting the axis of rotation. If undefined, the `rotX` value is used. If non-zero, {{domxref("DOMMatrixReadOnly.is2D", "is2D")}} is false.
+- `rotZ` {{optional_inline}}
+  - : A number; the z-coordinate of the vector denoting the axis of rotation. If undefined, the `rotX` value is used.
+- `angle` {{optional_inline}}
+  - : A number; the angle of the rotation around the axis vector, in degrees.
+
+### Return value
+
+A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix).
+
+## Examples
+
+```js
+const matrix = new DOMMatrix(); // create a matrix
+console.log(matrix.rotateAxisAngle().toString()); // matrix(1, 0, 0, 1, 0, 0)
+console.log(matrix.rotateAxisAngle(10, 20, 30).toString()); // matrix(1, 0, 0, 1, 0, 0)
+console.log(matrix.rotateAxisAngle(10, 20, 30, 45).toString());
+/* matrix3d(
+    0.728, 0.609, -0.315, 0, 
+    -0.525, 0.791, 0.315, 0, 
+    0.441, -0.063, 0.895, 
+    0, 0, 0, 0, 1) */
+console.log(matrix.rotateAxisAngle(5, 5, 5, -45).toString());
+/* matrix3d(
+    0.805, -0.311, 0.506, 0, 
+    0.506, 0.805, -0.311, 0, 
+    -0.311, 0.506, 0.805, 0, 
+    0, 0, 0, 1) */
+console.log(matrix.toString()); // output: "matrix(1, 0, 0, 1, 0, 0)" (unchanged)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix.rotateAxisAngleSelf()")}}
+- {{domxref("DOMMatrixReadOnly.rotate()")}}
+- {{domxref("DOMMatrixReadOnly.rotateFromVector()")}}
+- CSS {{cssxref("transform")}} property and {{cssxref("transform-function/rotate3d", "rotate3d()")}} function
+- CSS {{cssxref("rotate")}} property
+- [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) module
+- SVG [`transform`](/en-US/docs/Web/SVG/Attribute/transform) attribute
+- {{domxref("CanvasRenderingContext2D")}} interface and {{domxref("CanvasRenderingContext2D.rotate()", "rotate()")}} method