CSS skew() Function

Definition and Usage

CSS skew() The function is used to skew elements along the x-axis and y-axis by the given angle.

skew() Function in transform Used in attribute.

Example

Example 1

Usage skew() Skew Several <div> Elements:

#myDiv1 {
  transform: skew(15deg);
}
#myDiv2 {
  transform: skew(15deg, 15deg);
}
#myDiv3 {
  transform: skew(-15deg);
}

Try It Yourself

Example 2

Usage skew() Skewed Image:

#img1 {
  transform: skew(25deg);
}
#img2 {
  transform: skew(-25deg);
}
#img3 {
  transform: skew(10deg, 10deg);
}

Try It Yourself

CSS Syntax

skew(ax, ay)
Value Description
ax Required. Angle. Specifies the skew along the x-axis.
ay Optional. Angle. Specifies the skew along the y-axis. If omitted, the value is set to 0.

Technical Details

Version: CSS Transforms Module Level 1

Browser Support

The numbers in the table represent the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related Pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS skewX() function

Reference:CSS skewY() function