CSS 3D Transformations - Translation

In the previous chapter, CSS 3D Transformations — Perspective, we learnt about the role of perspective in 3D transformations in CSS.

In particular, we saw the perspective() transform function and the perspective and perspective-origin properties. Perspective on its own won't do anything, as we stated in that chapter, and has to be combined together with an actual transformation.

In this chapter, we shall begin by unravelling 3D translations, that are one such kind of transformations in CSS.

Specifically, we'll go over the translateZ() and translate3d() functions and consider a good handful of examples, both with the perspective() function and the perspective property.

Let's begin.

Before we begin, let's quickly recap what are translations in CSS and what is the z-axis.

A translation is simply to move an element from one point to another on a canvas. For instance, if we have a square as follows:

translating it by 20px to the right and 20px to the bottom would leave us with the following configuration:

Remember that the coordinate system of the web works as follows for the x and y axes:

• The origin is typically the top-left position.
• Positive x values go rightwards and negative x values go leftwards (just as in the Cartesian co-ordinate system).
• Positive y values go downwards and negative y values go upwards (opposite to the Cartesian co-ordinate system).

The translate(), and the individual translateX() and translateY() functions are used to perform translations of elements in the 2D xy plane.

Now talking about the z-axis, it is a virtual axis (in that we can't really visualize it on the screen) that runs from the viewer's eye towards the screen and beyond.

• Positive z values go towards the viewer.
• Negative z values go backwards, away from the viewer.

And this is essentially our quick recap. Time to discuss the translateZ() function.

The translateZ() function is used to translate an element in the z-axis.

As stated ealier, positive values bring the element closer to the viewer whereas negative values take it away from the viewer.

Syntactically, translateZ() is a little different than translateX() (and translateY()):

translateZ(<length>)

That is, it can only take <length> values, NOT percentage values. This makes sense because there is nothing relative to which a percentage value provided to translateZ() can resolve.

Let's consider some examples.

In the following code, we have a <div> element styled as a square.

<div></div>

div {
   width: 100px;
   height: 100px;
   background-color: blue;
}

Let's translate it forwards by 100px:

div {
   width: 100px;
   height: 100px;
   background-color: blue;
   transform: translateZ(100px);
}

Surprisingly, when we run the code, there's absolutely no effect.

And that's because one thing is missing from the rendering of the square so as to give the impression that it has moved closer to the viewer, i.e. perspective.

So, let's incorporate perspective into our example, and see the change it brings:

div {
   width: 100px;
   height: 100px;
   background-color: blue;
   transform: perspective(1000px) translateZ(100px);
}

Note that we're using the perspective() function directly on the <div>, followed by the translateZ() function.

Let's see the output:

Yup, it works this time.

Voila! There's our forwards-translated square, larger in size, thanks to the advent of perspective into the equation.

Now, let's shift gears and instead translate the square away from the viewer, using a negative z-value.

This time, as per expectation, the square should appear smaller:

div {
   width: 100px;
   height: 100px;
   background-color: blue;
   transform: perspective(1000px) translateZ(-500px);
}

And it indeed does.

Remember that if an element is given perspective via the perspective() transform function, the function must come before all other functions. Otherwise, we won't get any perspective effect.

This we learnt in the previous chapter, and it's also illustrated below:

div {
   width: 100px;
   height: 100px;
   background-color: blue;
   transform: translateZ(-150px) perspective(1000px);
}

This is because every function is processed in the very order that it appears in transform.

Imagine you want to work with translations in all three axes — x, y and z. One obvious way it to use the individual functions translateX(), translateY() and translateZ().

A simple example follows:

<div></div>

div {
   width: 50px;
   height: 50px;
   background-color: blue;
   transform: perspective(1000px) translateX(100px) translateY(100px) translateZ(-500px);
}

However, just as translate() is a conciser way to combine the values of translateX() and translateY(), so do we have a function to combine translation in the three axes.

It's the translate3d() function.

Here's the syntax of translate3d():

translate3d(tx, ty, tz)

The three arguments respectively govern translation in the x, y and z axis.

• tx can be a <length> or a <percentage>, as in the translateX() function.
• ty can be a <length> or a <percentage>, as in the translateY() function.
• tz can only be a <length>, as in the translateZ() function. Providing a <percentage> value is considered invalid.

Let's rewrite the code above using translate3d():

div {
   width: 100px;
   height: 100px;
   background-color: blue;
   transform: perspective(1000px) translate3d(50px, 50px, -500px);
}

See, the output is the exact same as before.