CSS Reference Function

scaleZ()

The scaleZ() is used to scale an element in the third dimension, along the z-axis.

It takes a unitless <number> sz as a value, which is used to scale the element’s size in the corresponding direction.

Examples:

transform: scaleZ(2); 
transform: scaleZ(1); /* element is unchanged */
transform: scaleZ(0.25); 
transform: scaleZ(-1);
                

Since all elements in CSS are two-dimensional, you might wonder how the scaleZ() would actually scale the element if an element in CSS does not have a “thickness”.

As a matter of fact, scaleZ() actually scales the element along the z-axis. Practically, it’s kind of like the z-axis itself is scaled, and then the position of the element on the z-axis will automatically be affected by the scale operation on the axis.

The effect of scaleZ is more obvious when you have an element with a perspective set, and that is rotated in three-dimensional space, or translated along the z-axis. So, we’ll go over a couple of examples.

In the first example, we have two elements that are positioned in three-dimensional space, and are translated along the z-axis using the translateZ() function. Both elements are translated by the same distance. Then, we’re going to scale the second element (the one on the right) using scaleZ(2). The following image shows the result of applying these transformations and the difference between the two elements after scaling the second one with scaleZ. Notice how the second element looks bigger, because its position on the z-axis has been scaled as the z-axis is scaled—it looks closer to you and hence bigger, but the actual dimensions (width and height) are unchanged.

scaleZ-example-1
The result of applying the same transformations to two elements, but with the difference of scaling the second element on the right using the scaleZ() function.

Another example where you can see the effect of scaleZ is when two elements are also transformed the same way, except that instead of translating them in three-dimensional space, they are rotated about the x-axis using rotateX. The second element (on the right) has been scaled along the z-axis using the scaleZ() function. Notice how it looks closer to you and thus bigger.

scaleZ-example-2
The result of applying the same transformations to two elements, but with the difference of scaling the second element on the right using the scaleZ() function.

Note that you have to keep the same order of transformations between the two elements to actually see the effect of scaleZ because, as mentioned earlier, the order of transformations matters and different orders will result in different transformations.

The official syntax looks as follows:

transform: scaleZ(<number>);
                

For a better understanding of the transform functions, please refer to the transform entry.

Browser Support

The following is the support table for three-dimensional CSS transformations:

CSS3 3D Transforms

Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

W3C Working Draft

Supported from the following versions:

Desktop

  • 12*
  • 10*
  • 10
  • 15*
  • 4*

Mobile / Tablet

  • 3.2*
  • 3*
  • 37
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 9:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.