The translateZ()
function is a transform function used to move an element along the z-axis in three-dimensional space.
It takes a translation value tz as an argument. This value specifies the amount by which an element is to be translated.
The translation value tz is provided as a <length>
. Not including a unit type will cause the number to be interpreted as a “user unit”.
Positive translation values will move the element along the positive direction of the z-axis, and negative values will move it in the opposite direction.
Examples:
transform: translateZ(300px); transform: translateZ(-5em); transform: translateZ(4vh);
The official syntax looks as follows:
transform: translate(tz);
For a better understanding of the transform functions, please refer to the transform entry.
Browser Support
The following is the support table for three-dimensional CSS transformations:
CSS3 3D Transforms
Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.
W3C Working Draft
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 23
- 15
Mobile / Tablet
- 15
- 130
- No
- 130
- 130