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.