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)!
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 */
The official syntax looks as follows:
For a better understanding of the transform functions, please refer to the transform entry.
The following is the support table for two-dimensional CSS transformations:
CSS3 2D Transforms
Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.
W3C Candidate Recommendation
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com