From e6903618e904dd601c7bc3454d7da7ea6fcd1127 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 6 Dec 2024 15:58:16 -0800 Subject: [PATCH] New pages: DOMMatrix.transformfunction() --- files/en-us/web/api/dommatrix/index.md | 5 +- .../web/api/dommatrix/rotateself/index.md | 74 +++++++++++++++++++ .../web/api/dommatrix/skewxself/index.md | 63 ++++++++++++++++ .../web/api/dommatrix/skewyself/index.md | 63 ++++++++++++++++ .../web/api/dommatrix/translateself/index.md | 72 ++++++++++++++++++ 5 files changed, 274 insertions(+), 3 deletions(-) create mode 100644 files/en-us/web/api/dommatrix/rotateself/index.md create mode 100644 files/en-us/web/api/dommatrix/skewxself/index.md create mode 100644 files/en-us/web/api/dommatrix/skewyself/index.md create mode 100644 files/en-us/web/api/dommatrix/translateself/index.md diff --git a/files/en-us/web/api/dommatrix/index.md b/files/en-us/web/api/dommatrix/index.md index 1a3f6433d6d6988..08d2b89d0eda675 100644 --- a/files/en-us/web/api/dommatrix/index.md +++ b/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 diff --git a/files/en-us/web/api/dommatrix/rotateself/index.md b/files/en-us/web/api/dommatrix/rotateself/index.md new file mode 100644 index 000000000000000..51a6e2810979943 --- /dev/null +++ b/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()")}} diff --git a/files/en-us/web/api/dommatrix/skewxself/index.md b/files/en-us/web/api/dommatrix/skewxself/index.md new file mode 100644 index 000000000000000..b0868e8758693bd --- /dev/null +++ b/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()")}} diff --git a/files/en-us/web/api/dommatrix/skewyself/index.md b/files/en-us/web/api/dommatrix/skewyself/index.md new file mode 100644 index 000000000000000..4d3668b80b3abf1 --- /dev/null +++ b/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()")}} diff --git a/files/en-us/web/api/dommatrix/translateself/index.md b/files/en-us/web/api/dommatrix/translateself/index.md new file mode 100644 index 000000000000000..6615a8e8923e5fb --- /dev/null +++ b/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()")}}