translate() | CSS-Tips

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

.guardian:hover .field {
  rework: translate(50px, 50%);
}

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

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

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

Syntax

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

 = translate( , ? )

…which is only a fancy approach 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 proper */
translate(-100%) /* strikes 100% of the ingredient's width to the left */

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

The translate() perform takes two  arguments (tx, ty, as in “translate horizontally” and “translate vertically”). These inform the browser how a lot to maneuver the ingredient and during which path path (whether or not it’s constructive or unfavorable).

• tx: Specifies the displacement within the horizontal axis. If it’s constructive, the ingredient goes proper. If it’s unfavorable, the ingredient shifts to the left.
• ty (non-obligatory): Specifies the displacement within the vertical axis. If it’s constructive, the ingredient goes downward, and if it’s unfavorable, 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 might 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 peak (for ty).

Primary utilization

Whereas now we have some ways to heart a component in CSS, for many of its historical past, our greatest shot to heart an absolute ingredient was utilizing the translate() perform.

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

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

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

Extra not too long ago, 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() perform strikes parts horizontally, whereas translateY() handles the vertical axis. If we as an alternative need diagonal motion, we may mix each or use the shorter translate() perform.

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

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

  rework: translate(40px, 40px);
  transition: rework 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;
  rework: translate(0, 0);
}

It doesn’t have an effect on different parts

The translate() perform, like different rework capabilities, doesn’t have an effect on the doc circulation. As a substitute, 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 area the ingredient initially occupied stays reserved within the format as if it hadn’t moved in any respect.

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

  rework: 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.

Not like 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 unhealthy interactions. In a state of affairs 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 resolution to that is to put the ingredient to be translated in a guardian container, and apply the pseudo-class (:hover) to the guardian, whereas the principle ingredient takes the translate perform.

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

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

Demo

Specification

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

Browser help

The translate() perform has baseline help on all trendy browsers.

Additional studying

Associated