# CSS skew() Function

The CSS `skew()`

function is used to skew elements in a two-dimensional space.

The `skew()`

element performs a shear transformation (also known as a shear mapping or a transvection), which displaces each point of an element by a given angle in each direction.

Skewing an element is kind of like taking the points of an element, and pushing or pulling them in different directions, based on a given angle.

The `skew()`

function works like this:

The `skew()`

function accepts two arguments, indicating the angle of the skew for the `x` and `y` axes respectively. These are represented by `angle` values.

If only one value is supplied, the second value has a zero value.

## Skew along the `x`-axis

Here's an example of using `skew()`

to skew an element along the `x`-axis.

## Skew along the `y`-axis

Here's an example of using `skew()`

to skew an element along the `y`-axis.

## Skew along Both Axes

Here's an example of using `skew()`

to skew an element along both the `x`-axis and the `y`-axis.

## Negative Values

You can also provide negative values if required.

## Removing `transform-origin`

In the previous examples, I use `transform-origin`

to adjust the origin of the transformation.

This is optional, so you can leave it out if required (or change the value).

The default origin for the rotation is `50% 50%`

(i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here's an example of what the previous example looks like when using the default `transform-origin`

value.

## Official Syntax

The official syntax of the `skew()`

function is as follows:

## Possible Values

The `skew()`

function accepts `angle` parameters that define the angle of the skew operation.

The angle can be represented with any of the following unit identifiers:

`deg`

- Degrees. There are 360 degrees in a full circle.
`grad`

- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
`grad`

as the unit identifier). There are 400 gradians in a full circle. `rad`

- Radians. There are 2Ï€ radians in a full circle.
`deg`

- Turns. There is 1 turn in a full circle.

#### Zero Angles

The unit identifier is optional for zero angles. For example, both `skew(0deg)`

and `skew(0)`

are valid (but `skew(45)`

is not).

## CSS Specifications

- The
`skew()`

function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

## Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.