skew() CSS Function


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


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


  • <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.


<img class="skew" src="images/nature.jpg" alt="Nature Image">
.skew {
transform-origin: top left;
transform: skew(10deg, 0);

Browser Support

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

Last updated by CSSPortal on: 1st December 2019