scaleZ() CSS Function

Description

The scaleZ90 CSS function scales the element along the Z axis. The effect will be noticeable only when using perspective, rotating the element along the X or Y axes, as well as when the element is shifted along the Z axis.

Syntax

scaleZ() = transform: scaleZ(<number>);

Values

  • <number>The value is a positive or negative number.
    - a value greater than 1 (for example: 1.5) increases the scale;
    - a value less than 1 (for example: 0.8) reduces the scale;
    - a value of 1 leaves the element size unchanged and does not give a visible effect.

Example

<img class="scaleZ" src="images/nature.jpg" alt="Nature Image">
.scaleZ {
transform-origin: top;
transform: perspective(400px) scaleZ(1.5) rotateX(45deg);
margin-left: 60px;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????