The 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

cssselector {
  transform: skewX(angle);
}

Example

In this example, the block is skewed 30 degrees to the left:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

See also