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

cssselector {
  transform: skew(one or two angles);
}

Example

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

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

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

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

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

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

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

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

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

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

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

Результат:

See also