translate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

Die translate CSS Eigenschaft ermöglicht es Ihnen, Übersetzungstransformationen einzeln und unabhängig von der transform-Eigenschaft zu spezifizieren. Dies passt besser zu typischer Benutzeroberflächennutzung und erspart das Erinnern der genauen Reihenfolge der Transformationsfunktionen, die im transform-Wert angegeben werden müssen.

Probieren Sie es aus

Syntax

css
/* Keyword values */
translate: none;

/* Single values */
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: revert-layer;
translate: unset;

Werte

Einfache <length-percentage> Angabe

Ein <length> oder <percentage>, das eine Übersetzung entlang der X-Achse spezifiziert. Entspricht einer translate()-Funktion (2D Translation) mit einem angegebenen Wert.

Zwei <length-percentage> Angaben

Zwei <length> oder <percentage>, die die X- und Y-Achsen Übersetzungswerte (jeweils) einer 2D-Translation spezifizieren. Entspricht einer translate()-Funktion (2D Translation) mit zwei angegebenen Werten.

Drei Werte

Zwei <length-percentage> und ein <length> Wert, die die X-, Y- und Z-Achsen Übersetzungswerte (jeweils) einer 3D-Translation spezifizieren. Entspricht einer translate3d()-Funktion (3D Translation).

none

Spezifiziert, dass keine Übersetzung angewendet werden soll.

Formale Definition

Anfangswertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebezieht sich auf die Größe der äußeren Box
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
AnimationstypTransformation
Erstellt StapelkontextJa

Formale Syntax

translate = 
none |
<length-percentage> [ <length-percentage> <length>? ]?

<length-percentage> =
<length> |
<percentage>

Beispiele

Übersetzung eines Elements bei Hover

Dieses Beispiel zeigt, wie die translate-Eigenschaft verwendet wird, um ein Element in drei Achsen zu verschieben. Das erste Kästchen wird entlang der X-Achse verschoben und das zweite Kästchen wird entlang der X- und Y-Achsen verschoben. Das dritte Kästchen wird entlang der X-, Y- und Z-Achsen verschoben und erweckt den Eindruck, auf den Betrachter zuzubewegen, da dem Elternelement perspective hinzugefügt wurde.

HTML

html
<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>

CSS

css
.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# individual-transforms

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translate
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch

Note: skew ist kein unabhängiger Transformationswert