Skip to main content

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 around which an element rotates.
  • 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.

Illustration of the 2D Cartesian coordinate system

A two-dimensional Cartesian coordinate system showing the X- and Y-axis
React Explained Clearly Book Now Available at Amazon

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 it on StackBlitz

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).

How to skew an element along only the Y-axis​

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

Try it on StackBlitz

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​

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

Try it on StackBlitz

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.

Overview​

This article discussed what a CSS skew() function is. We also used examples to see how it works.

Rakuten Kobo US