While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the โreport an issueโ button at the bottom of the tutorial.
In this article, youโll learn how to use the CSS translateZ()
function. In many ways itโs a unique CSS function because it challenges the idea that the web page is just a 2D visual space.
The CSS transform property has a lot of functions for moving HTMLElements around. Among them are the translateX
, translateY
, and translateZ
functions.
While translateX
and translateY
are pretty straightforward, translateZ
is slightly more difficult to understand.
Letโs review how translateX
and translateY
work:
div#myCircle {
background-color: gray;
width: 20px;
height: 20px;
border-radius: 100%;
transform: translateX(11px) translateY(20px);
}
The HTMLElement is moved 11px to the right, and down 20px.
Itโs moving it along x-axis and y-axis. You may remember these terms from Math classes in high school! Guess which axis the translateZ
function moves?
Thatโs right! The z-axis. Instead of moving HTMLElements horizontally/vertically it moves them closer to you, or further away from you.
Letโs try adding translateZ
to the previous code snippet:
div#myCircle {
background-color: gray;
width: 20px;
height: 20px;
border-radius: 100%;
transform: translateX(11px) translateY(20px) translateZ(75px) perspective(200px);
}
You might have noticed another CSS function called perspective()
. Itโs actually required for translateZ
to take effect. Itโs common to forget it since neither translateX
or translateY
require itโฆ But you gotta remember to use it with translateZ
!
The perspective() function defines the virtual distance between the plane of your computer screen and the HTMLElement youโre applying translateZ
to.
This means perspective(200px)
and translateZ(75px)
creates a virtual space of 200px between the HTMLElement and the computer screen, and then moves it 75px closer to you.
This causes the HTMLElement to appear larger ๐
Likewise using a negative value in translateZ()
moves it further away:
div#myCircle {
background-color: gray;
width: 20px;
height: 20px;
border-radius: 100%;
transform: translateX(11px) translateY(20px) translateZ(-100px) perspective(200px);
}
Hereโs a small demo that uses the translateZ
CSS function. Try hovering your mouse over the buttons!
button {
/* abridged css values */
transform: perspective(100px) translateZ(0px);
transition: transform 100ms linear;
}
button:hover {
transform: perspective(100px) translateZ(5px);
}
Itโs really easy to create compelling visual effects using translateZ
!
There are some unexpected behaviors with perspective
and translateZ
to keep in mind.
translateZ()
but the inverse is not trueโฆ Once you exceed the value of perspective()
the element will no longer be visible.perspective()
will workโฆ unless itโs a zero value (like 0px
, 0
, 0em
). This causes any translateZ()
effects to be ignored.Using translateZ
is the stepping stone to seeing webpages as a 3D visual spaceโฆ not just 2D! Hopefully youโll add it to your toolbox and itโll help you create compelling designs!
Visit MDN for documentation on translateZ
and perspective
๐ฆ๐
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Click here to Sign up and get $200 of credit to try our products over 60 days!
In my tests its necesary to set the perspective before change Z depth.
DONโT WORK:
WORKS: