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.
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:
For a better understanding of the transform functions, please refer to the transform entry.
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:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com