Use CSS Grid like a pro
Learn CSS Grid with live examples and images.
Check it outskew() transforms an element by slanting (skewing) it two-dimensionally around a fixed point.
skew()
Functionskew()
accepts two arguments. Here is the syntax:
element { transform: skew(aX, aY);}
Note the following:
aX
argument specifies the element’s skewing angle along the x-axis.aY
argument specifies the element’s skewing angle along the y-axis.aX
and aY
can be in degrees, gradians, radians, or turns.angle
argument consists of a number followed by the unit you wish to use—for instance, 45deg
.aY
is an optional argument.A two-dimensional Cartesian coordinate system showing the X- and Y-axis
skew()
FunctionBelow are some examples of how the CSS skew()
function works.
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.
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.
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.