# scaleZ function

The `scaleZ` function scales an element along the Z-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: scaleZ(number); }`

## Example

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

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

:

## Example

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

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

:

↑
en ru