skewX() CSS Function

Description

The CSS skewX() function is used to skew an element in the horizontal direction on the 2D plane. It takes a single parameter, which is the angle of the skew. The angle is specified in degrees, and a positive angle will skew the element to the right, while a negative angle will skew the element to the left.

Here is an example of how to use the skewX() function:

div {
  transform: skewX(10deg);
}

This code will skew the div element 10 degrees to the right.

Here is a diagram of how the skewX() function works:

[Diagram of the skewX() function]

As you can see, the skewX() function distorts the element in such a way that the top and bottom edges of the element are no longer parallel. The amount of distortion depends on the angle of the skew.

The skewX() function can be used to create a variety of effects, such as slanted text, skewed images, and distorted shapes. It is a powerful tool for adding visual interest to your web pages.

Here are some examples of how to use the skewX() function to create different effects:

  • To create slanted text, you can use the skewX() function to skew the text element. For example:
h1 {
  transform: skewX(10deg);
}

This code will slant the h1 heading 10 degrees to the right.

  • To skew an image, you can use the skewX() function to skew the img element. For example:
img {
  transform: skewX(10deg);
}

This code will skew the image 10 degrees to the right.

  • To create a distorted shape, you can use the skewX() function to skew a div element and then add a border to the div element. For example:
div {
  transform: skewX(10deg);
  border: 1px solid black;
}

This code will create a distorted rectangle with slanted sides.

Syntax

skewX() = transform: skewX(<angle>);

Values

  • <angle>The angle is taken as the value. A positive value tilts to the left, a negative value to the right. A value of 0 leaves the element without distortion.

Example

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

Browser Support

The following table will show you the current browser support for the CSS skewX() function.

Desktop
Edge Chrome Firefox Opera Safari
1213.510.13.5
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184113.212

Last updated by CSSPortal on: 7th October 2023