Web Development

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

translateZ() Read More »

translateY()

The CSS translateY() function shifts an element vertically by the specified amount. Specifically, it shifts an element either up or down, depending on whether the value is positive or negative. .parent:hover .box { transform: translateY(50%); /* Shift down by half the element’s height */ } CodePen Embed Fallback Along with other transform functions, it is used inside

translateY() Read More »