CSS skewX()

skewX() is a CSS transform function that skews an element along the x-axis by the specified angle. It distorts the element horizontally, shifting its top and bottom edges left or right while preserving its vertical orientation.

Syntax

transform: skewX(<value>);

Parameters:

• <angle>: Specifies the skew amount. Accepts any valid CSS angle unit:
  • Degrees (deg)
  • Radians (rad)
  • Gradians (grad)
  • Turns (turn)

The value may be positive or negative.

Return value:

None. This function produces a transform value that modifies the element’s rendering when applied through the transform property.

Example 1: Skewing by Degrees

In this example, the element is skewed horizontally by 30deg:

.box {
  width: 50px;
  height: 60px;
  background-color: red;
  transform: skewX(30deg);
}

Copy to clipboard
Copy to clipboard

The output of the code above is shown below:

Example 2: Skewing by Turns

In this example, the element is skewed horizontally by -0.2turn:

.box {
  width: 50px;
  height: 60px;
  background-color: red;
  transform: skewX(-0.2turn);
}

Copy to clipboard
Copy to clipboard

The output of the code above is shown below: