skew() CSS Function

Description

The CSS skew() function is used to skew an element on the 2D plane. This means that it can be used to tilt an element to the left or right, or to make it appear to be slanted.

The skew() function takes two parameters: ax and ay. The ax parameter represents the amount of skewing to be applied in the horizontal direction, and the ay parameter represents the amount of skewing to be applied in the vertical direction. Both parameters are specified in degrees.

If only one parameter is specified, it is used for the ax parameter, and the ay parameter is set to zero. This means that the element will be skewed in the horizontal direction only.

To skew an element in both the horizontal and vertical directions, you must specify two parameters. The first parameter will be used for the ax parameter, and the second parameter will be used for the ay parameter.

Here are some examples of how to use the skew() function:

/* Skew an element 10 degrees in the horizontal direction */
.element {
  transform: skewX(10deg);
}

/* Skew an element 10 degrees in the vertical direction */
.element {
  transform: skewY(10deg);
}

/* Skew an element 10 degrees in both the horizontal and vertical directions */
.element {
  transform: skew(10deg, 10deg);
}

The skew() function can be used to create a variety of interesting effects, such as:

  • Creating tilted text
  • Creating slanted shapes
  • Creating 3D effects
  • Creating perspective effects

Syntax

skew() = transform: skew(<angleX> [, <angleY>]?);

Values

  • <angleX>Sets the horizontal angle. A positive value tilts to the left, a negative value to the right.
  • <angleY>Sets the vertical angle of inclination. A positive value tilts down, a negative value up. If no value is specified, then the default value is 0 and no vertical distortion occurs.
One value sets the slope of the element only horizontally. Two values ​​set the slope of the element horizontally and vertically independently. A value of 0 leaves the element without distortion.

Example

<img class="skew" src="images/nature.jpg" alt="Nature Image">
.skew {
transform-origin: top left;
transform: skew(10deg, 0);
}

Browser Support

The following table will show you the current browser support for the CSS skew() function.

Desktop
Edge Chrome Firefox Opera Safari
1213.510.13.5
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184113.212

Last updated by CSSPortal on: 7th October 2023