CSS scaleX() Function
scaleX() function is used to scale elements in a two-dimensional space along the x-axis.
scaleX() function scales an element based on the number/s that you provide as an argument.
Because it only scales along the x-axis, the element will be distorted if you use it alone (for example, without also using the
scaleY() function to scale the y-axis).
Here's an example of scaling an element using
In the previous example, I use
transform-origin to adjust the origin of the transformation. Specifically, I use
transform-origin: top left; so that the images don't overlap as a result of the scaling operation.
The default origin for the rotation is
50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.
So here's an example of what the scale operation might look like when using the default
The official syntax of the
scaleX() function is as follows:
scaleX() = scaleX( <number> )
scaleX() function accepts the
<number> parameter that defines the scaling vector for the scale operation.
A number is either an integer, or zero or more decimal digits followed by a dot (
.) followed by one or more decimal digits and optionally an exponent composed of
E and an integer.
The following table provided by Caniuse.com shows the level of browser support for this feature.