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 in Web Workers.
The skewX()
method of the DOMMatrixReadOnly
interface returns a new DOMMatrix
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, see DOMMatrix.skewXSelf()
.
Syntax
js
skewX()
skewX(sX)
Parameters
sX
-
A number; the angle, in degrees, by which to skew the matrix along the x-axis.
Return value
A DOMMatrix
.
Examples
js
const matrix = new DOMMatrix(); // create a matrix
console.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
BCD tables only load in the browser
See also
DOMMatrixReadOnly.skewY()
DOMMatrix.skewXSelf()
- CSS
transform
property and theskew()
,skewX()
, andmatrix()
functions - CSS transforms module
- SVG
transform
attribute CanvasRenderingContext2D
interface'stransform()
method