CSS translateZ() Function – How to Reposition Elements along Z-axis
translateZ() transforms an element by repositioning (translating) it three-dimensionally along the z-axis.
Syntax of the CSS translateZ()
Function
translateZ()
accepts a single argument. Here is the syntax:
element {
transform: translateZ(length);
}
The length
argument specifies the distance you wish to move the element from its original z-axis position.
Examples of the CSS translateZ()
Function
We often use translateZ()
with the perspective()
function. Below are some examples.
How to use translateZ()
with the CSS perspective()
function
- CSS
- HTML
img {
width: 40%;
}
.second-image {
transform: perspective(33px) translateZ(10px);
}
<img
class="first-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
<img
class="second-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
Here's what we did in the snippet above:
- We used the
perspective()
function to define a33px
distance between the user and the z=0 plane. - We used the
translateZ()
function to reposition thesecond-image
ten pixels (10px
) away from its original position along the z-axis.
- Suppose the
second-image
's z-axis position is larger than or equal to theperspective()
function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element. Or when the element is behind the user. - The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.
How to use translateZ()
with a 70px
perspective
- CSS
- HTML
img {
width: 40%;
}
.second-image {
transform: perspective(70px) translateZ(10px);
}
<img
class="first-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
<img
class="second-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
Here's what we did in the snippet above:
- We used the
perspective()
function to define a70px
distance between the user and the z=0 plane. - We used the
translateZ()
function to reposition thesecond-image
ten pixels (10px
) away from its original position along the z-axis.
CSS translateZ()
Function vs. translate
Property: What's the Difference?
The CSS translateZ()
function and the CSS translate
property provide two similar ways to specify a translation transformation.
The main differences between the two translation techniques are as follows:
- The CSS
translate
property allows translating an element without using the CSStransform
property. - The CSS
translate
property's syntax is shorter than its function alternative. - The CSS
translate
property saves you from remembering the specific order to position the transform functions. - Browsers calculate the transform functions' matrix in the order you assigned them to the CSS
transform
property—from left to right. - Browsers calculate the
transform
properties' matrix in the following transformation matrix order:translate
rotate
scale
You must set a perspective
property on the "parent element" of the element you want to translate. Otherwise, the element will not move along its z-axis.
Here's an example:
Use CSS translate
property to translate an element along the Z-axis:
- CSS
- HTML
img {
width: 40%;
}
div {
perspective: 35px;
}
.second-image {
translate: 0px 0px 17px; /* Equal to a transform: translateZ(17px) property */
}
<img
class="first-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
<div>
<img
class="second-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
</div>
Here's what we did in the snippet above:
- We used the
perspective
property to define a35px
distance between the user and thez=0
plane. - We used the
translate
property to reposition thesecond-image
seventeen pixels (17px
) away from its original position along the z-axis.
A none
value tells browsers not to translate the selected element.
Overview
This article discussed what a CSS translateZ()
function is. We also used examples to see how it works.