From 36dad8295c52fdb984e701d77345b202fac200c8 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 10 Dec 2024 11:46:44 -0800 Subject: [PATCH 1/5] New page: DOMMatrixReadOnly.flipY() --- .../web/api/dommatrixreadonly/flipx/index.md | 12 ++-- .../web/api/dommatrixreadonly/flipy/index.md | 63 +++++++++++++++++++ 2 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 files/en-us/web/api/dommatrixreadonly/flipy/index.md diff --git a/files/en-us/web/api/dommatrixreadonly/flipx/index.md b/files/en-us/web/api/dommatrixreadonly/flipx/index.md index 9f8453d972956c4..8703536604e0ac1 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipx/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipx/index.md @@ -8,7 +8,7 @@ browser-compat: api.DOMMatrixReadOnly.flipX {{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} -The `flipX()` method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the x-axis. +The **`flipX()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the x-axis. This is equivalent to multiplying the matrix by `DOMMatrix(-1, 0, 0, 1, 0, 0)`. The original matrix is not modified. ## Syntax @@ -18,7 +18,7 @@ The `flipX()` method of the {{domxref("DOMMatrixReadOnly")}} interface creates a ### Return value -Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) containing a new matrix being the result of the original matrix flipped about the x-axis, which is equivalent to multiplying the matrix by `DOMMatrix(-1, 0, 0, 1, 0, 0)`. The original matrix is not modified. +Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). ## Examples @@ -26,8 +26,6 @@ Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) containing a new matrix b In this example, the SVG contains two paths in the shape of a triangle, both drawn to the same position. Note that the x co-ordinate of the viewBox attribute is negative, showing us content from both sides of the x-axis. -The JavaScript first creates an identity matrix, then uses the `flipX()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. The red triangle is left in place. - #### HTML ```html @@ -39,6 +37,8 @@ The JavaScript first creates an identity matrix, then uses the `flipX()` method #### JavaScript +The JavaScript first creates an identity matrix, then uses the `flipX()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. The red triangle is left in place. + ```js const flipped = document.getElementById("flipped"); const matrix = new DOMMatrixReadOnly(); @@ -57,3 +57,7 @@ flipped.setAttribute("transform", flippedMatrix.toString()); ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.flipY()")}} diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md new file mode 100644 index 000000000000000..b05969e7feff301 --- /dev/null +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -0,0 +1,63 @@ +--- +title: "DOMMatrixReadOnly: flipY() method" +short-title: flipY() +slug: Web/API/DOMMatrixReadOnly/flipY +page-type: web-api-instance-method +browser-compat: api.DOMMatrixReadOnly.flipY +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`flipY()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates a new matrix being the result of the original matrix flipped about the y-axis. This is equivalent to multiplying the matrix by `DOMMatrix(1, 0, 0, -1, 0, 0)`. The original matrix is not modified. + +## Syntax + +```js-nolint + DOMMatrixReadOnly.flipY() +``` + +### Return value + +Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). + +## Examples + +### Inverting a triangle + +In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The viewbox has a negative y position to enable the triangle to be withing the viewport after it is flipped. + +#### HTML + +```html + + + + +``` + +#### JavaScript + +The JavaScript creates an [identity matrix](/en-US/docs/Web/API/DOMMatrixReadOnly/isIdentity), then uses the `flipY()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the y-axis. The red triangle is left in place. + +```js +const flipped = document.getElementById("flipped"); +const matrix = new DOMMatrix(); +const flippedMatrix = matrix.flipY(); +flipped.setAttribute("transform", flippedMatrix.toString()); +``` + +#### Result + +{{EmbedLiveSample('Inverting a triangle')}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.flipX()")}} From 12c098b85bad366f97a2b4ec5920088ae84b3a25 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 10 Dec 2024 11:53:33 -0800 Subject: [PATCH 2/5] New page: DOMMatrixReadOnly.flipY() --- files/en-us/web/api/dommatrixreadonly/flipy/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md index b05969e7feff301..e80d81f00d3b545 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipy/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -24,7 +24,7 @@ Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). ### Inverting a triangle -In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The viewbox has a negative y position to enable the triangle to be withing the viewport after it is flipped. +In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The viewbox has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be withing the viewport after it is transformed. #### HTML From 3979c05ccb809556b697d8d8f94231ee78533fcb Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 12 Dec 2024 13:22:21 -0800 Subject: [PATCH 3/5] return value --- files/en-us/web/api/dommatrixreadonly/flipy/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md index e80d81f00d3b545..8d346cc39c637ee 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipy/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -18,7 +18,7 @@ The **`flipY()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creat ### Return value -Returns a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). +A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix). ## Examples From 6e720669d8867d535f710b7e44440542524219ed Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 9 Jan 2025 12:54:41 -0800 Subject: [PATCH 4/5] Update files/en-us/web/api/dommatrixreadonly/flipy/index.md --- files/en-us/web/api/dommatrixreadonly/flipy/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md index 8d346cc39c637ee..3b4aac5aaae6757 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipy/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -48,7 +48,7 @@ flipped.setAttribute("transform", flippedMatrix.toString()); #### Result -{{EmbedLiveSample('Inverting a triangle')}} +{{EmbedLiveSample('Inverting a triangle', '', '300')}} ## Specifications From e94428de91370dc0cd4ed8df35a93b23830867df Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 9 Jan 2025 13:18:25 -0800 Subject: [PATCH 5/5] Update files/en-us/web/api/dommatrixreadonly/flipy/index.md --- files/en-us/web/api/dommatrixreadonly/flipy/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/dommatrixreadonly/flipy/index.md b/files/en-us/web/api/dommatrixreadonly/flipy/index.md index 3b4aac5aaae6757..79aed18f23db590 100644 --- a/files/en-us/web/api/dommatrixreadonly/flipy/index.md +++ b/files/en-us/web/api/dommatrixreadonly/flipy/index.md @@ -48,7 +48,7 @@ flipped.setAttribute("transform", flippedMatrix.toString()); #### Result -{{EmbedLiveSample('Inverting a triangle', '', '300')}} +{{EmbedLiveSample('Inverting a triangle', '', '240')}} ## Specifications