Abakada: Back to Basics > Language References > CSS Properties > Transform Functions > skew( ) Transform Function

---

Skews an element on the 2D plane.

CSS	{ transform: skew( X-angle [ , Y-angle ] ) }
Script	object.style.transform = skew( X-angle [ , Y-angle ] )

Parameter	Description	Valid Values
X-angle	Required. Specifies the angle to use to distort the element along its horizontal axis ( width ).	Floating point number representing an angle value expressed in degrees, gradians, radians, or turns.
Y-angle	Optional. Specifies the angle to use to distort the element along its vertical axis ( height ).	Floating point number representing an angle value expressed in degrees, gradians, radians, or turns.

The property is read/write with a default value of zero; this attribute is not inherited.

NOTE: If Y-angle is not defined, the result is a purely horizontal skewing.

The skew( ) CSS function defines a transformation that skews or distorts an element along a fixed point on the 2D plane.

The transformation is a transvection that distorts each point within an element by the given angles in the horizontal and vertical directions. The effect is as if each corner of the element is pulled along the given angle.

skew( ) is specified with either one or two values, which define the amount of distortion to be applied to an element’s width and height.

If only one value is specified, it is used for the X-axis and there will be no skewing on the Y-axis. A positive value skews the object’s top towards the left. A negative value skews the object’s top towards the right.

element { transform: skew( 45deg ) }

transform: skew( 45deg )	transform: skew( -45deg )

Two values, separated by a comma, will skew the element along the X and Y axes independently. In this situation, either of the width or height can specify a different skew factor.

element { transform: skew( 45deg, 30deg ) }

transform: skew( 45deg, 30deg )	transform: skew( -30deg, -45deg )

skew( ) in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, like when presenting flip horizontal or flip vertical effects.

The following example demonstrates the effects of applying the skew( ) function to change an element’s appearance on the 2D plane.

 Show me 

Notice use of a transition in the transform to better illustrate the amount of deviation from the origin.

For a brief overview, please see Understanding and Using CSS Transforms.

skew3d( ), skewX( ), skewY( ), skewZ( )