The skewY function
The skewY function sets a skew of an
element along the Y-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 upwards, a
negative value - downwards. The skew is
performed around the point specified by the
transform-origin
property.
Syntax
cssselector {
transform: skewY(angle);
}
Example
In this example, the block is skewed
upwards by 30 degrees:
html<div id="elem">lorem ipsum</div>css#elem {
transform: skewY(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
Результат:
Example
In this example, the block is skewed
downwards by 30 degrees:
html<div id="elem">lorem ipsum</div>css#elem {
transform: skewY(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
Результат: