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.

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.

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.