skewX()

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

Skewing an element is like applying a tilting effect on it. In the case of skewX(), it is like grabbing two opposite vertices of a rectangle and then pulling them along the x-axis in opposite directions, turning the rectangle into a parallelogram.

It takes an angle ax as a value. The element is skewed by the value of the angle. You can imagine two opposite vertices (say the upper left and bottom right, for example) being pulled in opposite directions (the upper left pulled to the left and the bottom right to the right) until the inner value of these vertices becomes 90deg – ax.

If the angle value is positive, the upper left and bottom right corners of the rectangle are “pulled”. If the value is negative, the upper right and bottom left angles are pulled. An angle value of 90deg (or -90deg) will make the element disappear. A value of 180deg (or -180deg) will leave it unchanged.

Examples:

    transform: skewX(30deg);
    transform: skewX(-30deg);
    transform: skewX(-0.5rad);
    transform: skewX(-1turn);
    transform: skewX(-90deg);
                

The following image shows the result of applying skewX() to an image using a positive angle and then a negative angle of the same value.

Remember that skewing an element will also skew its coordinate system with it. Therefore, after applying a skew transformation to your element, you need to be aware that you’re not left with an orthogonal coordinate system anymore. When the coordinate system is skewed, consequent transformations may result in unexpected results if you don’t calculate them based on the new coordinate system. You can read more about coordinate systems in CSS and SVG here.

The official syntax looks as follows:

transform: skewX(<angle>);
                

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