Use Flexbox like a pro
Learn CSS Flexbox 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:
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.skew()
FunctionBelow are some examples of how the CSS skew()
function works.
The snippet above used the skew()
function to apply a thirty-degree (30⁰) slant on the image along only the x-axis.
The snippet above used the skew()
function to apply a forty-degree (40⁰) slant on the image along only the y-axis.
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.