translate()

The CSS translate() function shifts an element from its default position on a two-dimensional plane. This way, we can reposition an element horizontally, vertically, or both.

.parent:hover .box {
  transform: translate(50px, 50%);
}

Hover over the box to see it move 50% of its width towards the left:

CodePen Embed Fallback

Along with other transform functions, it is used inside the transform property.

The translate() function is defined in the CSS Transforms Module Level 1 draft.

Syntax

The translate() function’s syntax looks like this:

<translate()> = translate( <length-percentage>, <length-percentage>? )

…which is just a fancy way of saying we can move (translate) and element by one or two lengths or percentages. We’ll get into some examples in a bit. But first:

Arguments

/* Single argument */
translate(100px) /* moves 100px to the right */
translate(-100%) /* moves 100% of the element's width to the left */

/* Double argument */
translate(50px, 100px) /* moves 50px down, then 100px to the right */
translate(50%, 100%) /* moves 50% of the element's width downwards, then 100% its height to the right */

The translate() function takes two <length-percentage> arguments (tx, ty, as in “translate horizontally” and “translate vertically”). These tell the browser how much to move the element and in which direction direction (whether it’s positive or negative).

  • tx: Specifies the displacement in the horizontal axis. If it’s positive, the element goes right. If it’s negative, the element shifts to the left.
  • ty (optional): Specifies the displacement in the vertical axis. If it’s positive, the element goes downward, and if it’s negative, the element moves upward.

If only one argument is passed, it’s assumed to be tx. Alternatively, when both arguments are passed, the second argument will be ty. Together, they shift the element diagonally.

You’ll also notice that we can use either <length> or <percentage> values. A <length> value is absolute, while a <percentage> value is relative to the element’s width (for tx) or height (for ty).

Basic usage

While we have many ways to center an element in CSS, for most of its history, our best shot to center an absolute element was using the translate() function.

The process goes as follows: given an absolute element, we usually shift it to the center using top: 50% and left: 50%. However, these alone only fix the top-left corner of the element in the center, not the element itself. To fix this, we use transform: translate(-50%, -50%) to shift the element back by half of its own width and height.

.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0.9);
}

More recently, we can do this using the known justify-self and align-self properties. Alternatively, we could have used the semantic dialog modal which is centered by default.

CodePen Embed Fallback

Diagonal movements

The translateX() function moves elements horizontally, while translateY() handles the vertical axis. If we instead want diagonal movement, we could combine both or use the shorter translate() function.

A common use case would be to translate an element into the page from any corner. For example, if we had a Toast component and wanted it to slide in from the bottom-right, we could move the element through the bottom and right properties, then offset them off the page with translate().

.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;

  transform: translate(40px, 40px);
  transition: transform 0.28s ease;
}

Then, when a .show class is triggered, the translate() values are reset, causing them to slide in diagonally:

.toast.show {
  opacity: 1;
  transform: translate(0, 0);
}
CodePen Embed Fallback

It doesn’t affect other elements

The translate() function, like other transform functions, does not affect the document flow. Instead, it visually displaces the translated element to a new position without pushing the elements in its surroundings or the ones at the new position. Also, the space the element originally occupied remains reserved in the layout as if it hadn’t moved at all.

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translate(80px, 40px);
}

Notice how the “translated” element does not cause the Box 1 or Box 2 elements next to it to shift when it is moved.

CodePen Embed Fallback

Unlike margin, which can trigger reflows or shift neighboring elements, translate() only changes where the element is visually rendered.

Issues with pointer pseudo-classes

Using translate() directly on a pointer pseudo-classes like :hover can sometimes make for bad interactions. In a situation where the element is translated far enough from the cursor, the :hover state ends, causing the element to snap back immediately to its original position. A position where the cursor still lingers, so it translates again, resulting in a continuous flickering loop.

A simple solution to this is to place the element to be translated in a parent container, and apply the pseudo-class (:hover) to the parent, while the main element takes the translate function.

/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}
CodePen Embed Fallback

Demo

CodePen Embed Fallback

Specification

The CSS translate() function is defined in the CSS Transforms Module Level 1, which is currently in Editor’s Drafts.

Browser support

The translate() function has baseline support on all modern browsers.

Further reading

translate() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

This post first appeared on Read More

Related Posts