What case is optimal to use translateZ?

As we use X and Y axis so there not really we can see the Z axis. What is that case when we need or optimal to use it the transform: translateZ(0); for example?


There is a Z axis, you’ve always been able to stack elements in CSS (see z-index). Translations on the Z index are totally possible, and CSS allows for 3D transformations as well.

And specifically translateZ(0) will create a new layer, which forces the browser to shift the rendering to the GPU rather than the CPU, ie force CSS animations will use the graphics hardware on a device rather than the main processor