# The CSS scaleX() Function

This article demonstrates how to use the CSS scaleX function on elements with CSS transform. Included are code, definitions, and examples.

The scaleX function defines a [ `sx`, 1 ] scaling vector with the `sx` as the parameter. It allows a 2D transformation that changes the size of an HTML element along the x-axis or abscissa. The amount of scaling is determined by the `sx` linear scaling vector. For example, if `sx` = 0.5 or 1/2, the then element is going to be scaled down to one-half its size along the x-axis (horizontally). The scaling of the element is not preserved (isotropic) since the scaling is only done on the x-axis.

`ScaleX()` is a `<transform-function>` data type.

Take note that the `scaleX(sy)` has the same effect as several other CSS transforms, such as `transform: scale(sx, 1);` and `transform: scale3d(sx, 1, 1)`.

If a negative value is supplied, the result scaling effect is a symmetry of its original position. This is called an axial symmetry, with the horizontal axis passing through the origin. The origin can be changed by using the transform-origin property.

You can achieve the same axial symmetry across several transform values by setting the value of `sx` to -1.

• `transform: rotateY(180deg);`
• `transform: scale(-1, 1);`
• `transform: scale3d(-1, 1, 1);`

## Syntax

``transform: scaleX(sx);``

The CSS transform scaleX is expressed as `transform: scaleX(sx);` with the `sx` parameter being replaced with a number or percent like `transform: scaleX(0.2);`.

## Parameters

• `sx`

The `sx` value of scaleX is a number or a percentage. Sx represents the x-axis or the abscissa of the scaling vector. This value changes the height along the x-axis.

When the value is greater than 1, the element grows along the x-axis, if the value is less than 1, it shrinks.

## Examples

The examples below use numbers and percentage values for the parameter of the scaleX function.

``````transform: scaleX(1);     /* No effect */

transform: scaleX(0);     /* Not visable / disappear effect */

transform: scaleX(2)      /* A 2 scaling on x-axis */
transform: scaleX(0.65);  /* A 0.65 scaling on x-axis */
transform: scaleX(-3.6);  /* A -3.6 scaling with point reflection on x-axis */

transform: scaleX(6%)     /* A 6% scaling on x-axis. */
transform: scaleX(1.2);   /* A 1.2 scaling effect on x-axis. */``````

## Usage

You can apply the scaleX function to any element or image by using CSS selectors.

``````#element-id {
transform: scaleX(6);
}

.element-class {
transform: scaleX(8.8%);
}

img {
transform: scaleX(-0.5%);
}``````

## Try It

Below, we show an example where we use scaleX to scale an element on the x-axis.

HTML

``````<div>
<p>Normal Element</p>
</div>
<div class="scaled">
<p>Scaled Element</p>
</div>``````

CSS

``````body {
background: gray;
color: white;
}

div {
width: 120px;
height: 120px;
background-color: black;
display: inline-block;
}

.scaled {
transform: scaleX(0.6);
background-color: red;
}

p  {
font-family: cambria;
}``````

Click on me to edit the code on codepen.io.