CSS Reference Function

skew() i2v5c

The skew() function is a 2D transform function used to skew an element. gg18

Skewing an element is like applying a tilting effect on it. It is like grabbing two opposite vertices of a rectangle and then pulling them in opposite directions, turning the rectangle into a parallelogram.

It takes either one or two arguments: ax and ay. Both are angle values. The first value (ax) skews the element along the x-axis, and the second argument (ay) skews it along the y-axis. Skewing along the x-axis is like pulling the rectangle angles to the sides, and skewing along the y-axis is like pulling them vertically in opposite directions. The two angle values determine the amount by which the element is skewed. If the second value is not provided, it is assumed to be zero.

The skew() function was present in early drafts. It has been removed but is still present in some implementations. *Do not use it*. In order to skew an element in either direction, use the transform property. Also note that the behavior of skew() is different from multiplying skewX() with skewY().

The official syntax looks as follows:

transform: skew(<angle> [, <angle>]?);
                

For a better understanding of the transform functions, please refer to the transform entry.

Browser k5t66

The following is the table for two-dimensional CSS transformations:

CSS3 2D Transforms 291431

Method of transforming an element including rotating, scaling, etc. Includes for `transform` as well as `transform-origin` properties.

W3C Working Draft

ed from the following versions:

Desktop 3n671n

  • 36
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet 4q224p

  • 9.0
  • 66
  • No
  • 66
  • 60

* denotes prefix required.

  • ed:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated June 11, 2020 at 9:38 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.