This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

skew()

Summary

Defines a two-dimensional transformation consisting of simultaneous skew transformations of the X and Y axes. Not recommended and supported only for backwards compatibility; use a combination of skewX(angle), skewY(angle) and/or rotate(angle) instead.

Examples

The following code snippet is an example of the skew function in use. When applied to a square blue div element, it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

div {
  transform: skew(42deg, -12deg);
}

View live example

Syntax

skew ( <angle-x> , <angle-y> )

Parameters

angle-x
The angle by which the element is skewed along the x-axis. This value is expressed as a number followed by a supported angle unit.
angle-y
The angle by which the element is skewed along the y-axis. This value is expressed as a number followed by a supported angle unit.

See also

Related articles

Transforms

Related pages

Attributions