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 from which the computer skews an element.
- 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
andaY
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.
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β
- CSS
- HTML
img {
transform: skew(30deg);
transform-origin: top;
width: 80%;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
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β
- CSS
- HTML
img {
transform: skew(0, 40deg);
transform-origin: top left;
width: 80%;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
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 toskewY(40deg)
.
How to skew an element along the X- and Y-axisβ
- CSS
- HTML
img {
transform: skew(30deg, 40deg);
transform-origin: top left;
width: 80%;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
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.