Tutorial

Tricks for Using CSS translateZ() and perspective()

Published on December 13, 2019
author

William Le

Tricks for Using CSS translateZ() and perspective()

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.

Diagram illustrating the translation

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?

Diagram illustrating the Z axis

That’s right! The z-axis. Instead of moving HTMLElements horizontally/vertically it moves them closer to you, or further away from you.

Using translateZ()

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!

What does perspective() do?

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 💗

Diagram illustrating positive translateZ translation

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);
}

Diagram illustrating negative translateZ translation

Demo Time

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!

Interesting Factoids about translateZ()

There are some unexpected behaviors with perspective and translateZ to keep in mind.

  • If the value provided to translateZ() is equal or higher than the one provided to perspective(), it causes the HTMLElement to disappear. You can always set an infinitely lesser value in translateZ() but the inverse is not true… Once you exceed the value of perspective() the element will no longer be visible.
  • Applying perspective(0px). Any value for perspective() will work… unless it’s a zero value (like 0px, 0, 0em). This causes any translateZ() effects to be ignored.

Conclusion

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.

Learn more about us


About the authors
Default avatar
William Le

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


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!

In my tests its necesary to set the perspective before change Z depth.

DON’T WORK:

transform: translateX(11px) translateY(20px) translateZ(-100px) perspective(200px);

WORKS:

transform: translateX(11px) translateY(20px) perspective(200px) translateZ(-100px);

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel