ThescaleX()CSSfunction defines a transformation that resizes an element along thex-axis (horizontally). Its result is a<transform-function> data type.

Try it

transform: scaleX(1);

transform: scaleX(0.7);

transform: scaleX(1.3);

transform: scaleX(-0.5);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

It modifies the abscissa (horizontal, x-coordinate) of each element point by a constant factor, except when the scale factor is 1, in which casethe function is the identity transform. The scaling is not isotropic, and the angles of the element are generally not conserved, except for multiples of 90 degrees.scaleX(-1) defines anaxial symmetry, with a vertical axis passing through the origin (as specified by thetransform-originproperty).

Syntax

scaleX(s)

Values

s

Is a<number> representing the scaling factor to apply on the abscissa (horizontal, x-coordinate) of each point of theelement.

Formal syntax

<scaleX()> =
scaleX([<number>|<percentage>])

Examples

HTML

<div>Normal</div><div>Scaled</div>

CSS

div {  width: 80px;  height: 80px;  background-color: skyblue;}.scaled {  transform: scaleX(0.6);  background-color: pink;}

Result

Specifications

Browser compatibility

See also

• scaleY()
• scaleZ()
• transform
• scale
• <transform-function>
• transform-origin
• Other individual transform properties:
  • translate
  • rotate
  • Note: there is noskew property