New pages: DOMMatrix.invert() (#37172)

* New pages: DOMMatrix.invert() * landing page * Update files/en-us/web/api/dommatrix/invertself/index.md * Update files/en-us/web/api/dommatrix/invertself/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/dommatrixreadonly/inverse/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/dommatrixreadonly/inverse/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/dommatrixreadonly/inverse/index.md Co-authored-by: wbamberg <[email protected]> --------- Co-authored-by: wbamberg <[email protected]>
mdn · Dec 12, 2024 · 473a33d · 473a33d
1 parent 491fc99
commit 473a33d
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 1 deletion.
diff --git a/files/en-us/web/api/dommatrix/invertself/index.md b/files/en-us/web/api/dommatrix/invertself/index.md
@@ -0,0 +1,50 @@
+---
+title: "DOMMatrix: invertSelf() method"
+short-title: invertSelf()
+slug: Web/API/DOMMatrix/invertSelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.invertSelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`invertSelf()`** method of the {{domxref("DOMMatrix")}} interface inverts the original matrix. If the matrix cannot be inverted, the new matrix's components are all set to `NaN` and its {{domxref("DOMMatrix.is2D", "is2D")}} property is set to `false`.
+
+To invert a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.inverse()")}}
+
+## Syntax
+
+```js-nolint
+  DOMMatrix.invertSelf()
+```
+
+### Return value
+
+A {{domxref("DOMMatrix")}}.
+
+## Examples
+
+In this example, we create a matrix with a rotation of 30deg. Then invert it, resulting in a rotation of -30deg.
+
+```js
+const matrix = new DOMMatrix().rotate(30);
+console.log(matrix.toString());
+// output: matrix(0.866, 0.5, -0.5, 0.866, 0, 0)
+matrix.invertSelf();
+console.log(matrix.toString());
+// output: matrix(0.866, -0.5, 0.5, 0.866, 0, 0)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.inverse()")}}
+- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function
+- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function
diff --git a/files/en-us/web/api/dommatrixreadonly/index.md b/files/en-us/web/api/dommatrixreadonly/index.md
@@ -48,7 +48,7 @@ _This interface doesn't inherit any methods. None of the following methods alter
 - {{domxref("DOMMatrixReadOnly.flipY()")}}
   - : Returns a new {{domxref("DOMMatrix")}} created by flipping the source matrix around its Y-axis. This is equivalent to multiplying the matrix by `DOMMatrix(1, 0, 0, -1, 0, 0)`. The original matrix is not modified.
 - {{domxref("DOMMatrixReadOnly.inverse()")}}
-  - : Returns a new {{domxref("DOMMatrix")}} created by inverting the source matrix. If the matrix cannot be inverted, the new matrix's components are all set to `NaN` and its `is2D` property is set to `false`. The original matrix is not altered.
+  - : Returns a new {{domxref("DOMMatrix")}} created by inverting the source matrix. The original matrix is not altered.
 - {{domxref("DOMMatrixReadOnly.multiply()")}}
   - : Returns a new {{domxref("DOMMatrix")}} created by computing the dot product of the source matrix and the specified matrix: `A⋅B`. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is `0` _except_ the bottom-right corner and the element immediately above and to its left: `m33` and `m34`. These have the default value of `1`. The original matrix is not modified.
 - {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}}

diff --git a/files/en-us/web/api/dommatrixreadonly/inverse/index.md b/files/en-us/web/api/dommatrixreadonly/inverse/index.md
@@ -0,0 +1,50 @@
+---
+title: "DOMMatrixReadOnly: inverse() method"
+short-title: inverse()
+slug: Web/API/DOMMatrixReadOnly/inverse
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.inverse
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`inverse()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix which is the inverse of the original matrix. If the matrix cannot be inverted, the new matrix's components are all set to `NaN` and its {{domxref("DOMMatrixReadOnly.is2D", "is2D")}} property is set to `false`. The original matrix is not changed.
+
+To mutate the matrix as you invert it, see {{domxref("DOMMatrix.invertSelf()")}}.
+
+## Syntax
+
+```js-nolint
+  DOMMatrixReadOnly.inverse()
+```
+
+### Return value
+
+A {{domxref("DOMMatrix")}}.
+
+## Examples
+
+```js
+const matrix = new DOMMatrixReadOnly().rotate(30);
+const invertedMatrix = matrix.inverse();
+console.log(matrix.toString());
+// output: matrix(0.866, 0.5, -0.5, 0.866, 0, 0)
+console.log(invertedMatrix.toString());
+// output: matrix(0.866, -0.5, 0.5, 0.866, 0, 0)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix.invertSelf()")}}
+- {{domxref("DOMMatrixReadOnly.flipX()")}}
+- {{domxref("DOMMatrixReadOnly.flipY()")}}
+- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function
+- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function