translateX() | CSS-Methods

The CSS translateX() perform shifts a component horizontally by the required quantity. Particularly, it displaces a component to the correct or the left, relying on whether or not the worth is constructive or damaging.

.mum or dad:hover .field {
  remodel: translateX(50%);
}

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

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

Syntax

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

 = translateX(  )

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

Arguments

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

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

The translateX() perform takes a single  argument that specifies how far to maneuver the component and by which course, which may be both left (damaging) or proper (constructive).

The argument handed might be both a  or a :

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

Primary utilization

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

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

Then, with somewhat JavaScript, we will 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 {
  remodel: translateX(0);
}

Instance: Infinite marquee

Marquees in internet improvement are data banner elements that scroll mechanically. On most web sites, they’re used to show firm logos, maybe sponsors or shoppers, or, as on this case, announce new arrivals on an e-commerce web site.

Just like the final instance, we will use the translateX() perform to easily scroll a marquee part:

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

@keyframes marquee-scroll {
  0% {
    remodel: translateX(0);
  }
  100% {
    remodel: 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 the direction of the left.

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

Instance: Skeleton format animation

Skeletons loaders act as placeholders till the principle content material masses and replaces them, stopping sudden format shifts. They could be a static grey div of various sizes and styles of the unique content material, or we will make them extra attention-grabbing with a shimmer impact.

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

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

  remodel: 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 component from the left) to 120% (out of the web page on the correct), then begins once more

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

It doesn’t have an effect on different components

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

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

  remodel: translateX(80px);
}

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

In contrast to margin which might set off reflows or shift neighboring components, translate solely modifications the place the component is visually rendered.

Points with pointer pseudo-classes

Utilizing translateX() straight on a pointer pseudo-classes like :hover can generally break interactions. In a scenario the place the component is translated far and it strikes away from the cursor, the :hover state will get misplaced, inflicting the component 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 answer to that is to put the component to be translated in a mum or dad container, and apply the pseudo-class (:hover) to the mum or dad component, whereas the principle component takes the translate perform.

/* Drawback case */
.unhealthy:hover {
  remodel: translateX(160px);
}

/* Answer */
.mum or dad:hover .good {
  remodel: translateX(160px);
}

Specification

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

Browser assist

The translateX() perform has baseline assist on all trendy browsers.

Associated