CSS translateZ() Function
translateZ() function is used to move elements in a three-dimensional space along the z-axis.
translateZ() function works like this:
It moves the position of the element on the z-axis by the amount provided by
t. In other words, it moves the element towards, or further away from the viewer by the specified amount.
Here's an example of using
You can think of the z-axis as coming out of the screen towards the viewer. Therefore, a movement along that axis won't necessarily be apparent to the viewer unless you apply other styles that bring out the effect.
In this example, I've also included the
perspective function in order to demonstrate the effect of
translateZ(). The result is that the element appears to be closer to the viewer than the other (non-translated) element.
You can also provide negative values if required. This results in the element appearing further away from the user.
The official syntax of the
translateZ() function is as follows:
translateZ() function accepts the
The value is a length (e.g.
10vw, etc) that defines how much the element will move by.
The following table provided by Caniuse.com shows the level of browser support for this feature.