CSS Translations

Chapter 37 11 mins

Learning outcomes:

  1. What are translations
  2. The translateX() and translateY() functions
  3. Using the translate() function
  4. Relative translations

What are translations?

A translation is defined as:

The movement of an element from one position to another on an HTML document.

They can be in one, two or all of the three directions - x, y and z respectively. For now we will only focus on the first two axes forming the 2D plane - leaving the z-axis to be discovered in 3D transformations.

Just like we can get an element to move around a page using the top, left properties we can move it using translations - specify a position to move to and the element will be translated to that specific position.

In CSS transformations, we can use the functions translateX() and translateY() to move in the x and y directions respectively.

For a shorthand function we can use translate() taking essentially two parameters: x and y positions in this given order.

And that's is just it! So let's take a look at a few examples to help us illustrate translations even better.

Translations in x-axis

Translations in the x-axis are taken care of by the translateX() function, and even the translate() function, as we shall see below.

The function translates i.e moves an element, from its initial position, towards the right by the given amount. Negative values are acceptable, and will have the opposite effect - translate the element towards the left.

For instance, calling translateX(10px) will move an element by 10px to the right.

translateX() resembles the left property as applied on a position: relative element.

Since translateX() is meant to change the distance of elements from different points, it accepts parameters of type <length>.

For more info on the various data types in CSS, consider reading CSS Data Types.

Following we have a div element shown in its initial position (as a reference):

Now if we want to translate it 50px to the right we can simply write translateX(50px):

div {
    transform: translateX(50px);
}

And as you can see the element moved 50px to the right from its initial position.

Negative positions can also be specified in translations in which case the element would move backwards in the x-direction:

In the following example we have positioned the same div element above, to the right using float: right:

Now after translating this element 50px backwards using negative positions we get to the following result.

div {
    transform: translateX(-50px);
}

Translations in y-axis

Let's again take a look at the initial div layout shown above.

If we want to move this element downwards 50px we obviously need to specify a positive value (since transformation graphs are positive downwards and rightwards) and hence go with translateY(50px):

div {
    transform: translateY(50px);
}

And the element moved downwards by 50px.

Just like we showed negative values using translateX() we will do so using translateY() also - the result will be of the same logic.

div {
    transform: translateX(-50px);
}

Did you notice the element gone upwards by 50px?

Gathering x and y - translate()

To move an element in two directions, for instance 50px to the right and 50px downwards, we can use the same functions translateX() and translateY() as shown below in the transform property.

They must be seperated by a space in between to indicate two different functions.

div {
    transform: translateX(50px) translateY(50px);
}

50px downwards and rightwards - not that difficult to do.

But fortunately there is yet an easier way to translate in two directions at a time usually refered to as 2D translation, and that is using the function translate().

The function translate(x, y) takes two parameters that are the x and y positions to translate to - just the values we provide to translateX() and translateY() respectively.

So extending the example we gave above, translating in 2 directions, we will now solve it in a shorter and easier way:

div {
    transform: translate(50px, 50px);
}

One thing to note

One important thing to note is that if we omit the y parameter in the translate() function then the translation would be considered to be in the x direction only!

div {
    transform: translate(50px); /* second param omitted */
}
Although omitting the second parameter in translate() will cause translation in the x direction, we as programmers must stick with translateX() if we know that the translation is to be done in this direction.

And with this we conclude translational transformations.

Relative translations

One extremely useful idea of CSS translations is to work with percentage values to move elements relative to their original dimensions.

We'll show the 'useful' part of this below, but first we need to understand how to use percentage values, in general.

When translation is performed by a percentage value, such as translateX(100%), the value is taken relative to the translation's corresponding dimension.

As simple as it can get - x-axis corresponds with the width of the element, as width is a horizontal dimension and the x-axis also runs in that direction; and similarly y-axis corresponds with the height of the element.

This means that if we call translateX(100%), the value 100% will be resolved using the width of the element.

If the width is, let's say, 500px, translateX(100%) will resolve down to translateX(500px).

Just think naturally, and you'll understand this!

Shown below is an example:

<div></div>
<div></div>

We have the two div elements, both overlapping each other. The first div, sitting behind the second one, will serve to show you how far the second div has moved past its original position.

Following is the CSS to translate the second div element to the right by 100%:

div {
    /* stack both divs on top of each other */
    position: absolute;
    top: 0;
    left: 0;

    height: 150px;
    width: 100px;
    background-color: orange;
    opacity: 0.8
}

div:last-child {
    background-color: #bbb;
    transform: translateX(100%);
}

Live Example

As you can see clearly in the live example above, the div has indeed been transformed to the right by 100px i.e 100% of the 100px width.

If we now alter the rules for the second div to translate it using translateY(100%) here's what will happen:

div:last-child {
    transform: translateY(100%);
}

Live Example

As stated before, the translation is performed relative to the height of the div, since it was in the y-direction. The element has moved downwards by 150px i.e 100% of the 150px height.

Now that we know how percentage values work when passed to translation functions, we can finally unveil their 'useful' aspect.

Center alignment using translations

Suppose we want to center align an element within its container, both horizontally and vertically.

There are numerous ways to do this, depending on the initial configuration of the elements - are they inline-block, do they have absolute dimensions, is the container a flex or table, and so on and so forth.

One method which can quite neatly cover many alignment scenarios is to use relative translations.

Here's how it works:

Let's suppose that following is the markup for the container and the element, which has to be center aligned.

<div id="cont">
    <div id="ele"></div>
</div>

Initially, the element touches the top and left edges of the container. Now we'll change its position so that it can be moved using top and left.

We've used the value relative, but you can also use absolute, given that you truly understand how absolute positioning works.

#ele {
    position: relative;
}

After this, we first move the element rightwards using left and downwards using top by 50%. This will send the element only near the center, NOT precisely at the center!

#ele {
    position: relative;
    left: 50%;
    top: 50%
}

As is clear from first sight, the element is not at the center of the container. To bring it there we just need one more rule - and that's what we learnt right now: relative translation.

Moving the element upwards and rightwards using translate() by 50%. This will take care of all the precision!

#ele {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

And now we have a perfectly center-aligned element sitting inside its container. Simply tremendous!

If you're thinking where does all this 50% logic come from, well here's the answer to it.

Taking only the example of the horizontal axis:

  1. The rule left: 50% moves the element by half of the width of its container i.e its left edge coincides with the center of the container. However, we don't want this - rather we want the center of the element to coincide with the center of the container.
  2. translateX(-50%) moves the element backwards by half of its width, which results in the centers of the element and the container to overlap with one another.

Same goes for the vertical axis.

To boil it down, using CSS translations we can accomplish a lot - we can obviously pan around elements, center align stuff, and even do smooth animations and transitions, as we will see in the next chapter.

Get your hands firm on translations and you'll soon find them returning!