CSS Reference Function

scaleX()

The scaleX() function is used to scale an element up or down, making it bigger or smaller, in the direction of the x-axis.

It takes a unitless <number> sx as a value, which is used to scale the element’s size along the x-axis.

If the value provided is greater than one, the element is scaled up—it will look bigger along the x-axis. If the value is equal to one, the element stays unchanged in that direction. If the value is between zero and one exclusively, the element is scaled down along the x-axis. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped horizontally (as if it were rotated along the y-axis)!

Examples:

transform: scaleX(2); /* scales the element to twice its size along the x-axis */
transform: scaleX(1); /* element is unchanged */
transform: scaleX(0.25); /* scales the element along the x-axis to quarter its size */
transform: scaleX(-1); /* flips the element along the x-axis */
                

See the scale() value in the transform entry to see how a negative value flips an element when applied using scaleX().

The official syntax looks as follows:

transform: scaleX(<number>);
                

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

Browser Support

The following is the support table for two-dimensional CSS transformations:

CSS3 2D Transforms Support

Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.

Current Status: W3C Working Draft

Supported from the following versions:

Desktop

  • 4*
  • 3.5*
  • 6
  • 10.*
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 11
  • 56
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:46 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.