translateZ() CSS Function
Description
The translateZ()
CSS function shifts the element relative to its original location by a specified value along the Z axis. The effect will be noticeable only when using perspective, rotating the element along the X or Y axes.
Syntax
transform: translate(tz);
Values
- tzA <length> representing the z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value farther away.
Example
<img class="translate" src="images/nature.jpg" alt="Nature Image">
.translate {
transform: perspective(200px) translateZ(-60px);
}
Browser Support
Desktop | |||||
? | ? | ? | ? | ? | ? |
Tablets / Mobile | |||||
![]() |
|||||
? | ? | ? | ? | ? | ? |
Last updated by CSSPortal on: 1st December 2019