skew() CSS Function

Description

The skew() CSS function tilts the element in two-dimensional space horizontally and vertically or simultaneously in two directions.

Syntax

skew() = transform: skew(<angleX> [, <angleY>]?);

Values

  • <angleX>Sets the horizontal angle. A positive value tilts to the left, a negative value to the right.
  • <angleY>Sets the vertical angle of inclination. A positive value tilts down, a negative value up. If no value is specified, then the default value is 0 and no vertical distortion occurs.
One value sets the slope of the element only horizontally. Two values ​​set the slope of the element horizontally and vertically independently. A value of 0 leaves the element without distortion.

Example

<img class="skew" src="images/nature.jpg" alt="Nature Image">
.skew {

    transform-origin: top left;

    transform: skew(10deg, 0);

}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????

Last updated by CSSPortal on: 1st December 2019