translateZ()

The CSS translateZ() function moves elements along the Z-axis to simulate depth in 3D space. It requires either the perspective CSS property on a parent element or the perspective() function applied before the transform to be visually effective. Positive values bring elements closer to the viewer; negative values push them away. The difference between the perspective property (applies to all children) and the perspective() function (applies to a single element, must come first) is explained with code examples. Additionally, translateZ(0) can be used as a GPU-acceleration hack to shift rendering off the CPU, reducing animation flickering and improving performance.