translate() | CSS-Methods

The CSS translate() operate shifts a component from its default place on a two-dimensional airplane. This fashion, we are able to reposition a component horizontally, vertically, or each.

.dad or mum:hover .field {
  remodel: translate(50px, 50%);
}

Hover over the field to see it transfer 50% of its width in direction of the left:

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

The translate() operate is outlined within the CSS Transforms Module Stage 1 draft.

Syntax

The translate() operate’s syntax seems like this:

 = translate( , ? )

…which is only a fancy means of claiming we are able to transfer (translate) and ingredient by one or two lengths or percentages. We’ll get into some examples in a bit. However first:

Arguments

/* Single argument */
translate(100px) /* strikes 100px to the correct */
translate(-100%) /* strikes 100% of the ingredient's width to the left */

/* Double argument */
translate(50px, 100px) /* strikes 50px down, then 100px to the correct */
translate(50%, 100%) /* strikes 50% of the ingredient's width downwards, then 100% its top to the correct */

The translate() operate takes two  arguments (tx, ty, as in “translate horizontally” and “translate vertically”). These inform the browser how a lot to maneuver the ingredient and by which course course (whether or not it’s optimistic or adverse).

• tx: Specifies the displacement within the horizontal axis. If it’s optimistic, the ingredient goes proper. If it’s adverse, the ingredient shifts to the left.
• ty (optionally available): Specifies the displacement within the vertical axis. If it’s optimistic, the ingredient goes downward, and if it’s adverse, the ingredient strikes upward.

If just one argument is handed, it’s assumed to be tx. Alternatively, when each arguments are handed, the second argument will probably be ty. Collectively, they shift the ingredient diagonally.

You’ll additionally discover that we are able to use both  or  values. A  worth is absolute, whereas a  worth is relative to the ingredient’s width (for tx) or top (for ty).

Fundamental utilization

Whereas we’ve got some ways to middle a component in CSS, for many of its historical past, our greatest shot to middle an absolute ingredient was utilizing the translate() operate.

The method goes as follows: given an absolute ingredient, we often shift it to the middle utilizing prime: 50% and left: 50%. Nevertheless, these alone solely repair the top-left nook of the ingredient within the middle, not the ingredient itself. To repair this, we use remodel: translate(-50%, -50%) to shift the ingredient again by half of its personal width and top.

.modal-center {
  place: absolute;
  prime: 50%;
  left: 50%;

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

Extra just lately, we are able to do that utilizing the identified justify-self and align-self properties. Alternatively, we may have used the semantic dialog modal which is centered by default.

Diagonal actions

The translateX() operate strikes parts horizontally, whereas translateY() handles the vertical axis. If we as a substitute need diagonal motion, we may mix each or use the shorter translate() operate.

A typical use case can be to translate a component into the web page from any nook. For instance, if we had a Toast element and wished it to slip in from the bottom-right, we may transfer the ingredient by way of the backside and proper properties, then offset them off the web page with translate().

.toast {
  place: mounted;
  backside: 30px;
  proper: 30px;

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

Then, when a .present class is triggered, the translate() values are reset, inflicting them to slip in diagonally:

.toast.present {
  opacity: 1;
  remodel: translate(0, 0);
}

It doesn’t have an effect on different parts

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

/* Translated ingredient */
.translated {
  place: absolute;
  prime: 0;
  left: 0;

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

Discover how the “translated” ingredient doesn’t trigger the Field 1 or Field 2 parts subsequent to it to shift when it’s moved.

In contrast to margin, which may set off reflows or shift neighboring parts, translate() solely adjustments the place the ingredient is visually rendered.

Points with pointer pseudo-classes

Utilizing translate() instantly on a pointer pseudo-classes like :hover can typically make for dangerous interactions. In a scenario the place the ingredient is translated far sufficient from the cursor, the :hover state ends, inflicting the ingredient to snap again instantly to its authentic place. A place the place the cursor nonetheless lingers, so it interprets once more, leading to a steady flickering loop.

A easy answer to that is to put the ingredient to be translated in a dad or mum container, and apply the pseudo-class (:hover) to the dad or mum, whereas the principle ingredient takes the translate operate.

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

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

Demo

Specification

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

Browser assist

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

Additional studying

Associated