CSS scaleZ() Function

The CSS scaleZ() function is used to scale elements in a three-dimensional space along the z-axis.

The scaleZ() function scales an element based on the number/s that you provide as an argument.

Here's an example of scaling an element using scaleZ(). Because it only scales along the z-axis, I've added some other transform functions in order to make the scale operation apparent. This has the effect of the image swinging out towards the viewer.

<style>
  .scaled {
    transform-origin: top;
    transform: perspective(500px) scaleZ(7) rotateX(45deg);
    margin-left: 40px;
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">
<p>Some sample text to demonstrate how the resized image fits into the page after the scaling operation.</p>

Removing `transform-origin`

In the previous example, I use transform-origin to adjust the origin of the transformation. Specifically, I use transform-origin: top; in order to exaggerate the effect of the scale operation on the x-axis.

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 transform-origin value.

<style>
  .scaled {
    transform: perspective(500px) scaleZ(7) rotateX(45deg);
    margin-left: 40px;
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">
<p>Using the default <code>transform-origin</code>, the image rotates from its center point.</p>

Official Syntax

The official syntax of the scaleZ() function is as follows:

Possible Values

The scaleZ() function accepts number parameters that define 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 or E and an integer.

CSS Specifications

The scaleZ() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support