translateZ()

The CSS translateZ() function adds depth to an element, drawing it closer or farther in space. In other words, it shifts an element along the Z-axis in a 3D space. .box:hover { transform: translateZ(100px); } .box.perspective:hover { transform: perspective(500px) translateZ(100px); } Either the perspective() function or perspective property is necessary for translateZ() to work. Without either one, there’s no effect. Activate the switch in the following demo, then hover over the box to see it appear closer: CodePen Embed Fallback While it looks like the .box element is getting bigger” on hover, that’s not what is happening. When you hover over the box, it actually moves closer to you a length of 100 pixels, making it appear larger. We’ll get more into that in just a bit so it’s more obvious what’s happening there. translateZ() should not be mistaken for an alternative to the scale() function or scale property. Perspective and scale are two different concepts. The translateZ() function is defined in the CSS Transform Module Level 2 specification Syntax translateZ() = translateZ() The translateZ() function takes a single argument that defines how far the element is from the front of the screen. It’s used with the transform property Arguments /* Positive lengths */ transform: translateZ(100px); transform: translateZ(5rem); /* Negative lengths */ transform: translateZ(-50px); transform: translateZ(-8em); The translateZ() function takes a single argument: : the distance of the element from the front of the screen. When it is positive, the element moves closer to the user, and further away when it’s negative. How it works The translateZ() function is tricky because it moves an element along the Z-axis, which is not visually perceptible in a browser by default. Since browsers only render elements by their height and width, not their depth, the translateZ() function may appear to do nothing. To show its depth and projection, we need to use either t