DOMMatrixReadOnly: flipY() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available inWeb Workers.
TheflipY() method of theDOMMatrixReadOnly interface creates a new matrix being the result of the original matrix flipped about the y-axis. This is equivalent to multiplying the matrix byDOMMatrix(1, 0, 0, -1, 0, 0). The original matrix is not modified.
Syntax
flipY()Parameters
None.
Return value
Examples
Inverting a triangle
In this example, the SVG contains two identicalpaths in the shape of a triangle; they are both drawn to have the same size and position. The view box has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be within the viewport after it is transformed.
HTML
<svg height="200" width="100" viewBox="0 -100 100 200"> <path fill="red" d="M 0 0 L 100 0 L 50 100 Z" /> <path fill="blue" d="M 0 0 L 100 0 L 50 100 Z" /></svg>JavaScript
The JavaScript creates anidentity matrix, then uses theflipY() 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.
const flipped = document.getElementById("flipped");const matrix = new DOMMatrix();const flippedMatrix = matrix.flipY();flipped.setAttribute("transform", flippedMatrix.toString());Result
Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipy |