Tricks for Using CSS translateZ() and perspective()

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 💗

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.

• 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.

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!