# 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; }`

:

## See also

- the `skewX` function
  that sets a skew along the X-axis
- the `skewY` function
  that sets a skew along the Y-axis

← →
↑
en ru