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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
skewX() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
DOMMatrixReadOnly.skewY()
DOMMatrix.skewXSelf()
- CSS
transform
property and theskew()
,skewX()
, andmatrix()
functions - CSS transforms module
- SVG
transform
attribute CanvasRenderingContext2D
interface'stransform()
method