skewX function
The skewX function sets a skew of an
element along the X-axis, turning it into a
parallelogram. It is used together with the
transform
property. The property value is an angle in any
angle units.
The angle can be either positive or negative. A
positive value makes the skew to the left, a
negative value - to the right. The skew is
performed around the point specified by the
transform-origin
property.
Syntax
selector {
transform: skewX(angle);
}
Example
In this example, the block is skewed
30 degrees to the left:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(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: skewX(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
: