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 in Web Workers.

The flipY() method of the 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
flipY()

Return value

Examples

Inverting a triangle

In this example, the SVG contains two identical paths 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

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" id="flipped" />
</svg>

JavaScript

The JavaScript creates an identity matrix, 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

Specifications

Specification
Geometry Interfaces Module Level 1
# dom-dommatrixreadonly-flipy

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flipY()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also