Übersetzen | CSS-Tricks

CSS Almanac → Properties → T → translate

Joel Olawanle am 28. Nov. 2022

Die CSS-Eigenschaft translate ermöglicht es Ihnen, ein Element von einem Ort zu einem anderen entlang der X- (horizontalen), Y- (vertikalen) und Z- (Tiefen-) Achse zu verschieben, ähnlich wie Sie ein Element mit Offsets wie top, bottom, left und right verschieben würden.

.element {
  translate: 100px;
}

Die Eigenschaft translate funktioniert genau wie die Funktion translate(), die mit der Eigenschaft transform verwendet wird,

.element {
  transform: translate(100px);
}

Der Unterschied besteht darin, dass die Funktion translate() die dreidimensionale Z-Achse nicht unterstützt.

Syntax

translate: none | <length-percentage> [ <length-percentage> <length>? ]?;

…wobei <length-percentage> entweder ein Längenwert oder ein Prozentwert sein kann. Beim Schreiben von Werten kann translate ein, zwei oder drei Werte in einer einzigen Deklaration annehmen.

/* Keyword value */
translate: none;

/* Single value */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;

/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: unset;

Die Deklaration eines Wertes verschiebt das Element nur entlang der X-Achse. Die Deklaration von zwei Werten setzt die X- und Y-Achsen unabhängig voneinander. Die Deklaration von drei Werten setzt die X-, Y- und Z-Achsen jeweils.

Initial: none
Gilt für: transformierbare Elemente
Vererbt: nein
Prozente: beziehen sich auf die Größe der Bounding Box
Berechneter Wert: wie angegeben, aber mit relativen Längen, die in absolute Längen umgewandelt wurden
Animationstyp: eine Transformation
Erzeugt Stapelkontext: ja

Werte

none: Dies wird verwendet, um anzugeben, dass keine Verschiebung angewendet werden soll.
<length-percentage>: Dies ist ein numerischer Wert, der bestimmt, wie weit ein Element entlang einer Achse verschoben wird.

Wenn wir einen Prozentwert in der Eigenschaft translate verwenden, bezieht sich dieser Prozentwert auf die Größe des Elements und nicht auf den verfügbaren Platz innerhalb des übergeordneten Containers.

`translate` ändert den Layoutfluss nicht

Es ist wichtig zu wissen, dass die Eigenschaft translate nicht dazu führt, dass andere Elemente um sie herum fließen, was anders ist als bei einer Transformation (d. h. transform:translate()). Beachten Sie unten, dass die Box, wenn sie verschoben wird, ihre umgebenden Elemente nicht verzerrt oder beeinflusst.

Übergänge und Animationen

Wir können translate in CSS-Übergängen und -Animationen verwenden. Das bedeutet, wir können von einem Ort zum anderen übergehen, zum Beispiel wenn das Element gehovert wird.

Oder wir können rotate mit einzelnen Transformationen in einer CSS-Animation mit @keyframes kombinieren, um noch interessantere Effekte zu erzielen

Wenn Sie sich die Browserunterstützung genau ansehen, sollten Sie eine Fallback-Lösung in Betracht ziehen, die mit anderen Browsern funktioniert, bis die Eigenschaft translate die vollständige Browserunterstützung erhält. Die Eigenschaft transform ist eine praktikable Fallback-Alternative für eine unabhängige Transformationseigenschaft wie rotate.

Zum Beispiel könnten wir die rotate-Animation in einen @supports-Block einfügen. So läuft die Animation nur, wenn der Browser die Eigenschaft translate unterstützt

/* Using transform by default */
@keyframes loader {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(100% 50%);
  }
}

/* Use translate instead, but only if it is supported */
@supports (translate: 0deg) {
  @keyframes loader {
    0% {
      translate: 0;
    }
    100% {
      translate: 100% 50%;
    }
  }
}