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