CSS skewX() Function

The CSS skewX() function is used to skew elements in a two-dimensional space along the x-axis.

The skewX() element performs a shear transformation (also known as a shear mapping or a transvection), which displaces each point of an element by a given angle along the x-axis.

Skewing an element is kind of like taking the points of an element, and pushing or pulling them in different directions, based on a given angle.

The skewX() function works like this:

The skewX() function accepts one argument which specifies the angle of the skew for the x-axis. It can be any valid angle value.

Here's an example of using skewX():

View Output

Negative Values

You can also provide negative values if required.

View Output

Removing transform-origin

In the previous examples, I use transform-origin to adjust the origin of the transformation.

This is optional, so you can leave it out if required (or change the value).

The default origin for the rotation is 50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here's an example of what the previous example looks like when using the default transform-origin value.

View Output

Official Syntax

The official syntax of the skewX() function is as follows:

Possible Values

The skewX() function accepts a parameter that defines the angle of the skew operation.

The angle can be any valid angle value, which can be represented with any of the following unit identifiers:

deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle.
rad
Radians. There are 2Ï€ radians in a full circle.
deg
Turns. There is 1 turn in a full circle.

Zero Angles

The unit identifier is optional for zero angles. For example, both skew(0deg) and skew(0) are valid (but skew(45) is not).

CSS Specifications

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.