The skew function
The skew function sets a skew of an
element, thereby turning it from a rectangle
into a parallelogram. It is used together with the
transform
property. The property value is an angle in any
angle units.
The skew is performed around the point specified by the
transform-origin
property.
It can take one or two parameters, separated by commas. If there are two parameters, the first parameter specifies the horizontal skew, and the second - the vertical skew. If there is single parameter, it specifies the horizontal skew (not both dimensions). Parameters can be both positive and negative.
Syntax
selector {
transform: skew(one or two angles);
}
Example
In this example, the block is skewed
30 degrees to the left:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Example
In this example, the block is skewed
30 degrees to the right:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Example
In this example, the block is skewed by
30 degrees vertically
(positive value):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Example
In this example, the block is skewed by
30 degrees vertically
(negative value):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Example
We set the skew simultaneously along the X- and Y-axes:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
