CSS translateZ() Function
The CSS translateZ() function is used within the
transform property, and repositions
an element along the z-axis in 3D space.
This means that it moves the element closer to or farther away from the viwer.
Note: To activate a 3D space, the element needs perspective. Without perspective, any 3D transforms will look flat and two-dimensional.
Example
Use translateZ() to move <div> elements closer to or farther away from the viewer:
.container {
perspective: 500px; /* Creates the 3D space */
}
.box1 {
transform: translateZ(100px);
}
.box2 {
transform: translateZ(-100px);
}
Try it Yourself »
More "Try it Yourself" examples below.
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| translateZ() | 12 | 12 | 10 | 4 | 15 |
CSS Syntax
translateZ(length)
| Value | Description |
|---|---|
| length | Required. A positive value moves the element closer to the viewer. A negative value moves the element farther away from the viewer. |
| Version: | CSS Transforms Module Level 2 |
|---|
More Examples
Example
Use translateZ() to move images closer to or farther away from the viwer:
.container {
perspective: 500px; /* Creates the 3D space */
}
.img1 {
transform: translateZ(100px);
}
.img2 {
transform: translateZ(-100px);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS perspective property.
CSS reference: CSS rotate3d() function.
CSS reference: CSS rotateX() function.
CSS reference: CSS rotateY() function.
CSS reference: CSS rotateZ() function.
CSS tutorial: CSS 3D transforms.
