# scaleX function

The `scaleX` function scales an element along the X-axis. Scaling is performed around the point specified by the `transform-origin` property. The function value is an integer or fractional number. If it is greater than `1`, the element increases in size; if it is less (for example, `0.5`), the element decreases. If you set `1`, nothing will change (this is the default value).

## Syntax

`selector { transform: scaleX(number); }`

## Example

When hovering over a block, we will increase the scale by `1.5` times along the X-axis:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scaleX(1.5); }`

:

## Example

When hovering over a block, we will reduce the scale by `2` times along the X-axis:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scaleX(0.5); }`

:

## See also

- the `scale` function
  that sets a scaling along the X- and Y-axes
- the `scaleY` function
  that sets the Y-axis scaling

← →
↑
en ru