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
  DOMMatrixReadOnly.flipY()

Return value

A DOMMatrix.

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

BCD tables only load in the browser

See also