The translateZ()
CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function>
data type.
This transformation is defined by a <length>
which specifies how far inward or outward the element or elements move.
Note: translateZ(tz)
is equivalent to translate3d(0, 0, tz)
.
Syntax
translateZ(tz)
Values
tz
- A
<length>
representing the z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value farther away.
Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
---|---|---|---|
This transformation applies to the 3D space and can't be represented on the plane. | A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. |
Examples
In this example, two boxes are created. One is positioned normally on the page, without being translated at all. The second is altered by applying perspective to create a 3D space, then moved towards the user.
HTML
<div>Static</div> <div class="moved">Moved</div>
CSS
div { position: relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translateZ(200px); background-color: pink; }
What really matters here is the class "moved"; let's take a look at what it does. First, the perspective()
function positions the viewer relative to the plane that lies where z=0 (in essence, the surface of the screen). A value of 500px
means the user is 500 pixels "in front of" the imagery located at z=0.
Then, the translateZ()
function moves the element 200 pixels "outward" from the screen, toward the user. This has the effect of making the element appear larger when viewed on a 2D display, or closer when viewed using a VR headset or other 3D display device.
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 2 The definition of 'transform' in that specification. |
Editor's Draft | Adds 3D transform functions to the CSS Transforms standard. |
Browser compatibility
Please see the <transform-function>
data type for compatibility info.