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

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

Note

• “Transform origin” is the fixed point from which the computer skews an element.
• You can define your element’s fixed point using the CSS transform-origin property. But the default is center.

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.

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

CSS

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

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

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.

Note

skew(30deg) is equivalent to skewX(30deg).

CodeSweetly ads

How to skew an element along only the Y-axis

CSS

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

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

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.

Note

• A zero (0) skew degree tells browsers not to apply any skewing effect on the selected element.
• skew(0, 40deg) is equivalent to skewY(40deg).

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

CSS

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

HTML

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

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.