When applying both in a single transform declaration, perspective() must come before translateZ() to define the space before moving the object within it.
(e.g., translateZ(100px) ): Move the element "out" toward the user. translate z
Unlike translateX or translateY , translateZ does not support percentage values because there is no defined "depth" of a parent container to calculate a percentage against. The Role of Perspective When applying both in a single transform declaration,
(e.g., translateZ(-100px) ): Push the element "into" the screen, away from the user. The Role of Perspective (e
Web developers use translateZ() to create complex visual experiences that 2D properties cannot achieve alone: translateZ() - CSS - MDN Web Docs
The perspective() function defines the virtual distance between the user’s eye and the screen (z=0).
The CSS function translateZ() is a 3D transformation tool used to move elements along the , effectively shifting them closer to or further away from the viewer. Unlike 2D translations that move items horizontally or vertically, translateZ() creates an illusion of depth, making elements appear larger as they move forward or smaller as they retreat into the background. Core Mechanics of translateZ