skew() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<img class="skew" src="images/nature.jpg" alt="Nature Image">

CSS

.skew {

    transform-origin: top left;

    transform: skew(10deg, 0);

}

Result

Editor

Browser Support

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

Desktop

12	1	3.5	10.1	3.5

Tablets / Mobile

18	4	11	3.2	1	2

Last updated by CSSPortal on: 7th October 2023

Support Us