DOMMatrixReadOnly: skewX() 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.
TheskewX() method of theDOMMatrixReadOnly interface returns a newDOMMatrix created by applying the specified skew transformation to the source matrix along its x-axis. The original matrix is not modified.
To mutate the matrix as you skew it along the x-axis, seeDOMMatrix.skewXSelf().
In this article
Syntax
js
skewX()skewX(sX)Parameters
sXA number; the angle, in degrees, by which to skew the matrix along the x-axis.
Return value
Examples
js
const matrix = new DOMMatrix(); // create a matrixconsole.log(matrix.toString()); // no transform applied// "matrix(1, 0, 0, 1, 0, 0)"console.log(matrix.skewX(14).toString());// "matrix(1, 0, 0.25, 1, 0, 0)"console.log(matrix.toString()); // original is unchanged// "matrix(1, 0, 0, 1, 0, 0)"Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1> # dom-dommatrixreadonly-skewx> |
Browser compatibility
See also
DOMMatrixReadOnly.skewY()DOMMatrix.skewXSelf()- CSS
transformproperty and theskew(),skewX(), andmatrix()functions - CSS transforms module
- SVG
transformattribute CanvasRenderingContext2Dinterface'stransform()method