translateX()

The CSS translateX() function shifts an element horizontally by the specified amount. Specifically, it displaces an element to the right or the left, depending on whether the value is positive or negative.

.parent:hover .box {
  transform: translateX(50%);
}

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

It is defined in the CSS Transforms Module Level 1 draft.

Syntax

The translateX() function has a simple syntax given as:

<translateX()> = translateX( <length-percentage> )

Or, in plain English: Translate (or move) this element horizontally by this much.

Arguments

/* <length> */
translateY(80px) /* Element moves 80px to the bottom */
translateY(-24ch) /* Element moves 24ch to the top */

/* <percentage> */
translateY(50%) /* Element moves 50% of the element's height downward */
translateY(-100%) /* Element moves 100% of the element's height upward */

The translateX() function takes a single <length-percentage> argument that specifies how far to move the element and in which direction, which can be either left (negative) or right (positive).

The argument passed could be either a <length> or a <percentage>:

• <length>: When it’s positive, say 50px, the element moves 50 pixels to the right. On the other hand, in the case of -40ch, the element moves 40 characters to the left.
• <percentage>: Percentages are relative to the element’s width. So, for a 400px-wide element, translateX(50%) moves it 200px to the right, while translateX(-50%) moves it 200px to the left.

Basic usage

We can use the translateX() function to make elements slide onto the webpage in lots of ways. For instance, a sidebar that slides in from the left (or right) when clicking a menu button. To achieve this, we initially shift the sidebar completely off the page:

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.2s ease-in;
}

Then, with a little JavaScript, we can toggle an .open class whenever the user clicks on the menu buttons. This moves the sidebar back into the page from the left:

.sidebar.open {
  transform: translateX(0);
}

Example: Infinite marquee

Marquees in web development are information banner components that scroll automatically. On most websites, they are used to display company logos, perhaps sponsors or clients, or, as in this case, announce new arrivals on an e-commerce site.

Similar to the last example, we can use the translateX() function to smoothly scroll a marquee component:

.marquee-content {
  animation: marquee-scroll 20s linear infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

The marquee-scroll keyframes defines how the component scrolls from the start stage to the stop stage, where the component is shifted by half its width towards the left.

To make it scroll infinitely, the animation-iteration-count is set to infinite on the animation shorthand property.

Example: Skeleton layout animation

Skeletons loaders act as placeholders until the main content loads and replaces them, preventing unexpected layout shifts. They can be a static gray div of different shapes and sizes of the original content, or we can make them more interesting with a shimmer effect.

Using the ::after pseudoelement, we can set a default transform: translateX(-120%);, then use a shimmer animation to move it through the .skeleton component infinitely.

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;

  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
  animation: shimmer 1.15s linear infinite;
}

The shimmer keyframe translates the pseudoelement from -120% (off the element from the left) to 120% (out of the page on the right), then starts again

@keyframes shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

It doesn’t affect other elements

The translateX() 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: translateX(80px);
}

Notice how the “Translated” element does not cause either the Box 1 or Box 3 elements to shift when it moves.

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 translateX() directly on a pointer pseudo-classes like :hover can sometimes break interactions. In a situation where the element is translated far and it moves away from the cursor, the :hover state gets lost, causing the element to snap back immediately to its original position. At the initial position, the cursor is there, 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 element, while the main element takes the translate function.

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

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

Specification

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

Browser support

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

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

This post first appeared on Read More