skew(), skewX() et skewY() - CSS functions

skew()
skewX()
skewY()

Summary of characteristics of the skew() function

Quick description
Sets a tilt of the element along the X and/or Y axes.
Status
Standard
Percentages
Not applicable.
W3C Module
CSS Transforms Module
References (W3C)
Document status: CR (Candidate Recommendation)

Description of the skew(), skewX() and skewY() functions.

The skew() function defines the skew to be applied to the element along the X-axis and/or Y-axis. It can therefore replace the other two functions that define the tilt on only one of the X or Y axes.
The skewZ() function is not defined.

The angular values used for the inclination of an element should be understood as follows:

Tilt with skewX() function Tilt with skewY() function

However, the W3C now recommends that skew() no longer be used, and that both functions should be used instead skewX() and skewY(). See CSS Transforms Module Level 1.
However, the result obtained with the same angle values is different, as can be seen in the example below.
transform:skew(30deg,30deg);
transform:skewX(30deg) skewY(30deg);

These fonctions can be used with:

  • transform : Applies one or more geometric transformations (rotations, enlargements, etc.).

Syntax.

  • transform: skewX(10deg); x transform: skewY(20deg); y transform: skew(10deg, 20deg); x y

    x and y define the angle of the skew to be applied to the element.

    These are two numerical values followed by their angular unit (see CSS angle units). Values can be positive or negative excluding 90deg and 270deg, as well as their multiples.

    If only one value is specified for the skew() function, it corresponds to the X-axis tilt, the inclination along the Y-axis being set to 0.

Simulator.

transform :
Résultat

Browsers compatibility with skew() function.

2D transformations are no longer a problem with current browsers. The same is true for the CSS functions that define these transformations.

Column 1
General support for 2D transformations, including rotations, element translations, and more
Column 2
Support for the skew() function which, when used with the transform property, causes the element to skew
Column 3
Support for the skewX() and skewY() functions which, when used with the transform property, tilt the element horizontally or vertically.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

1
2D
transformations
2
skew()
function
3
skewX()
skewY()

functions
Estimated overall support.
97%
96%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Historic of the skew() function.

  • CSS Transforms Module Level 1

    First level of specification concerning 2D transformations.
    Presentation of the different transformation functions including skew(), skewX() and skewY().
    skew() is declared deprecated but retained for compatibility reasons.
    WD
    February 28, 2012
    Working Draft.
    CR
    February 14, 2019
    Candidate Recommendation.
    PR
    REC
  • CSS Transforms Module Level 2

    Level 2 of the Transforms specification, introducing 3D transformations.
    No change directly affecting the 2D functions skew(), skewX() and skewY().
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, concerning transformations.

The CSS Transforms Module contains all the properties and functions related to CSS transformations. The skew(), skewX(), and skewY() functions are described in this module, as well as all of the following:

Properties:

backface-visibility
Visibility of the rear side of the element (while it is rotating).
perspective
Langue française
A perspective effect applied to a 3D transformed element.
perspective-origin
Langue française
Position of the observer in the case of a 3D distortion with perspective.
rotate
Defines a rotation to apply to the element.
scale
Sets a scaling of the element (magnification or shrinking).
transform
Applies one or more geometric transformations (rotations, enlargements, etc.).
transform-box
Langue française
Sets the reference box for transformations.
transform-origin
Langue française
Sets the origin point for transformations.
transform-style
Langue française
Defines how elements that undergo a 3D transformation are rendered.
translate
Applies a translation to an element (a linear displacement).

Functions:

matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Langue française
Applies a series of 3D transformations to an element.
perspective()
Langue française
Sets the height of the observer in the case of a 3D transformation.
rotate()
Sets a rotation to apply to the element in 2D (in the plane of the screen).
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate()
Defines a translation (a linear move) to an element.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).