New pages: DOMMatrix multiply(), multiplySelf(), and preMultiplySelf()

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

@@ -51,7 +51,7 @@ _This interface includes the following methods, as well as the methods it inheri
 - {{domxref("DOMMatrix.multiplySelf()")}}
   - : Modifies the matrix by post-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `A⋅B`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself.
 - {{domxref("DOMMatrix.preMultiplySelf()")}}
-  - : Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `B⋅A`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself.
+  - : Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. Returns itself.
 - {{domxref("DOMMatrix.translateSelf()")}}
   - : Modifies the matrix by applying the specified vector. The default vector is `[0, 0, 0]`. Returns itself.
 - {{domxref("DOMMatrix.scaleSelf()")}}

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

@@ -0,0 +1,58 @@
+---
+title: "DOMMatrix: multiplySelf() method"
+short-title: multiplySelf()
+slug: Web/API/DOMMatrix/multiplySelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.multiplySelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`multiplySelf()`** method of the {{domxref("DOMMatrix")}} interface multiplies a matrix by the `otherMatrix` parameter, computing the dot product of the original 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`.
+
+To multiply a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.multiply()")}}.
+
+## Syntax
+
+```js-nolint
+  DOMMatrix.multiplySelf()
+  DOMMatrix.multiplySelf(otherMatrix)
+```
+
+### Parameters
+
+- `otherMatrix` {{optional_inline}}
+  - : The [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) multiplier.
+
+### Return value
+
+Returns itself; the [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) updated to the results of the applied multiplications.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix().rotate(30);
+
+console.log(matrix.toString());
+// output: matrix(0.866, 0.5, -0.5, 0.866, 0, 0)
+
+matrix.multiplySelf(matrix);
+
+console.log(matrix.toString());
+// output: matrix(0.5, 0.866, -0.866, 0.5, 0, 0) (a 60deg rotation)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.multiply()")}}
+- {{domxref("DOMMatrix.preMultiplySelf()")}}
+- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function
+- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function

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

@@ -0,0 +1,57 @@
+---
+title: "DOMMatrix: preMultiplySelf() method"
+short-title: preMultiplySelf()
+slug: Web/API/DOMMatrix/preMultiplySelf
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrix.preMultiplySelf
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`preMultiplySelf()`** method of the {{domxref("DOMMatrix")}} interface modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `B⋅A`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. 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`.
+
+## Syntax
+
+```js-nolint
+  DOMMatrix.preMultiplySelf()
+  DOMMatrix.preMultiplySelf(otherMatrix)
+```
+
+### Parameters
+
+- `otherMatrix` {{optional_inline}}
+  - : The [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) multiplier.
+
+### Return value
+
+Returns itself; a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) updated to results of the applied multiplications.
+
+## Examples
+
+```js
+const matrix = new DOMMatrix().translate(3, 22);
+const otherMatrix = new DOMMatrix().translateSelf(15, 45);
+
+console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 3, 22)
+console.log(otherMatrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45)
+
+matrix.preMultiplySelf(otherMatrix);
+
+console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 18, 67)
+console.log(otherMatrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix.multiplySelf()")}}
+- {{domxref("DOMMatrixReadOnly.multiply()")}}
+- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function
+- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function

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

@@ -50,7 +50,7 @@ _This interface doesn't inherit any methods. None of the following methods alter
 - {{domxref("DOMMatrixReadOnly.inverse()")}}
   - : 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.
+  - : Returns a new {{domxref("DOMMatrix")}} created by computing the dot product of the source matrix and the specified matrix. The original matrix is not
 - {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}}
   - : Returns a new {{domxref("DOMMatrix")}} created by rotating the source matrix by the given angle around the specified vector. The original matrix is not modified.
 - {{domxref("DOMMatrixReadOnly.rotate()")}}

files/en-us/web/api/dommatrixreadonly/multiply/index.md

@@ -0,0 +1,53 @@
+---
+title: "DOMMatrixReadOnly: multiply() method"
+short-title: multiply()
+slug: Web/API/DOMMatrixReadOnly/multiply
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.multiply
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`multiply()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates and returns a new matrix which is the dot product of the matrix and the `otherMatrix` parameter. If `otherMatrix` is omitted, 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.
+
+To mutate the matrix as you multiply it, see {{domxref("DOMMatrix.multiplySelf()")}}.
+
+## Syntax
+
+```js-nolint
+  DOMMatrixReadOnly.multiply()
+  DOMMatrixReadOnly.multiply(otherMatrix)
+```
+
+### Parameters
+
+- `otherMatrix` {{optional_inline}}
+  - : The [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) multiplier.
+
+### Return value
+
+A {{domxref("DOMMatrix")}}.
+
+## Examples
+
+```js
+const matrix = new DOMMatrixReadOnly().translate(13, 21);
+const multipliedMatrix = matrix.multiply(matrix);
+console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 13, 21)
+console.log(multipliedMatrix.toString()); // output: matrix(1, 0, 0, 1, 26, 42)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix.multiplySelf()")}}
+- {{domxref("DOMMatrixReadOnly.preMultiply()")}}
+- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function
+- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function