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