`skewX()` CSS function

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

Learn more
See full compatibility

The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a <transform-function> data type.

Try it

transform: skewX(0);

transform: skewX(35deg);

transform: skewX(-0.06turn);

transform: skewX(0.352rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa (horizontal, x-coordinate) of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

Note: skewX(a) is equivalent to skew(a).

Syntax

css

skewX(a)

Values

a: Is an <angle> representing the angle to use to distort the element along the abscissa (horizontal, x-coordinate).

Cartesian coordinates on ^2	Homogeneous coordinates on ^2	Cartesian coordinates on ^3	Homogeneous coordinates on ^3
(1tan(a)01)\left( \begin{array}{cc} 1 & \tan(a) \\ 0 & 1 \end{array} \right)	(1tan(a)0010001)\left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)	(1tan(a)0010001)\left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)	(1tan(a)00010000100001)\left( \begin{array}{cccc} 1 & \tan(a) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
	`[1 0 tan(a) 1 0 0]`

Formal syntax

<skewX()> = 
  skewX( [ <angle> | <zero> ] )

This syntax reflects the latest standard as per CSS Transforms Module Level 1. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

HTML

html

<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /* Equal to skew(10deg) */
  background-color: pink;
}