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.
note
- 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.
Overview
This article discussed what a CSS translateZ()
function is. We also used examples to see how it works.