Skip to content
Announcing the new Pro Zone. Check it out!

CSS skew() Function – How to Slant Elements in CSS

skew() transforms an element by slanting (skewing) it two-dimensionally around a fixed point.

Syntax of the CSS skew() Function

skew() accepts two arguments. Here is the syntax:

element {
transform: skew(aX, aY);
}

Note the following:

  • The aX argument specifies the element’s skewing angle along the x-axis.
  • The aY argument specifies the element’s skewing angle along the y-axis.
  • aX and aY can be in degrees, gradians, radians, or turns.
  • An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
  • aY is an optional argument.

Illustration of the 2D Cartesian coordinate
system

A two-dimensional Cartesian coordinate system showing the X- and Y-axis

Examples of the CSS skew() Function

Below are some examples of how the CSS skew() function works.

How to skew an element along only the X-axis

img {
transform: skew(30deg);
transform-origin: top;
width: 80%;
}

Try Editing It

The snippet above used the skew() function to apply a thirty-degree (30⁰) slant on the image along only the x-axis.

How to skew an element along only the Y-axis

img {
transform: skew(0, 40deg);
transform-origin: top left;
width: 80%;
}

Try Editing It

The snippet above used the skew() function to apply a forty-degree (40⁰) slant on the image along only the y-axis.

How to skew an element along the X- and Y-axis

img {
transform: skew(30deg, 40deg);
transform-origin: top left;
width: 80%;
}

Try Editing It

The snippet above used the skew() function to apply a thirty-degree (30⁰) slant on the image along the x-axis. And forty-degree (40⁰) along the y-axis.