translateX() | CSS-Methods

The CSS translateX() operate shifts a component horizontally by the desired quantity. Particularly, it displaces a component to the suitable or the left, relying on whether or not the worth is optimistic or detrimental.

.guardian:hover .field {
  rework: translateX(50%);
}

Together with different rework features, it’s used contained in the rework property.

It’s outlined within the CSS Transforms Module Stage 1 draft.

Syntax

The translateX() operate has a easy syntax given as:

 = translateX(  )

Or, in plain English: Translate (or transfer) this factor horizontally by this a lot.

Arguments

/*  */
translateY(80px) /* Aspect strikes 80px to the underside */
translateY(-24ch) /* Aspect strikes 24ch to the highest */

/*  */
translateY(50%) /* Aspect strikes 50% of the factor's peak downward */
translateY(-100%) /* Aspect strikes 100% of the factor's peak upward */

The translateX() operate takes a single  argument that specifies how far to maneuver the factor and through which path, which may be both left (detrimental) or proper (optimistic).

The argument handed could possibly be both a  or a :

• : When it’s optimistic, say 50px, the factor strikes 50 pixels to the suitable. Then again, within the case of -40ch, the factor strikes 40 characters to the left.
• : Percentages are relative to the factor’s width. So, for a 400px-wide factor, translateX(50%) strikes it 200px to the suitable, whereas translateX(-50%) strikes it 200px to the left.

Primary utilization

We are able to use the translateX() operate to make parts slide onto the webpage in numerous methods. As an example, a sidebar that slides in from the left (or proper) when clicking a menu button. To attain this, we initially shift the sidebar fully off the web page:

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

Then, with just a little JavaScript, we are able to toggle an .open class at any time when the person clicks on the menu buttons. This strikes the sidebar again into the web page from the left:

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

Instance: Infinite marquee

Marquees in net improvement are info banner elements that scroll routinely. On most web sites, they’re used to show firm logos, maybe sponsors or purchasers, or, as on this case, announce new arrivals on an e-commerce website.

Just like the final instance, we are able to use the translateX() operate to easily scroll a marquee part:

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

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

The marquee-scroll keyframes defines how the part scrolls from the beginning stage to the cease stage, the place the part is shifted by half its width in direction of the left.

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

Instance: Skeleton structure animation

Skeletons loaders act as placeholders till the primary content material hundreds and replaces them, stopping surprising structure shifts. They could be a static grey div of various styles and sizes of the unique content material, or we are able to make them extra attention-grabbing with a shimmer impact.

Utilizing the ::after pseudoelement, we are able to set a default rework: translateX(-120%);, then use a shimmer animation to maneuver it by way of the .skeleton part infinitely.

.skeleton::after {
  content material: "";
  place: absolute;
  inset: 0;

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

The shimmer keyframe interprets the pseudoelement from -120% (off the factor from the left) to 120% (out of the web page on the suitable), then begins once more

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

It doesn’t have an effect on different parts

The translateX() operate, like different rework features, doesn’t have an effect on the doc circulate. As an alternative, it visually displaces the translated factor to a brand new place with out pushing the weather in its environment or those on the new place. Additionally, the house the factor initially occupied stays reserved within the structure as if it hadn’t moved in any respect.

/* Translated factor */
.translated {
  place: absolute;
  high: 0;
  left: 0;

  rework: translateX(80px);
}

Discover how the “Translated” factor doesn’t trigger both the Field 1 or Field 3 parts to shift when it strikes.

Not like margin which may set off reflows or shift neighboring parts, translate solely modifications the place the factor is visually rendered.

Points with pointer pseudo-classes

Utilizing translateX() instantly on a pointer pseudo-classes like :hover can typically break interactions. In a scenario the place the factor is translated far and it strikes away from the cursor, the :hover state will get misplaced, inflicting the factor to snap again instantly to its unique place. On the preliminary place, the cursor is there, so it interprets once more, leading to a steady flickering loop.

A easy resolution to that is to position the factor to be translated in a guardian container, and apply the pseudo-class (:hover) to the guardian factor, whereas the primary factor takes the translate operate.

/* Downside case */
.dangerous:hover {
  rework: translateX(160px);
}

/* Resolution */
.guardian:hover .good {
  rework: translateX(160px);
}

Specification

The CSS translateX() operate is outlined within the CSS Transforms Module Stage 1, which is presently in Editor’s Drafts.

Browser assist

The translateX() operate has baseline assist on all fashionable browsers.

Associated