translate

Mit der CSS-Eigenschaft translate CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft transform angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen.

Syntax

/* Standardwert */
translate: none;

/* Einzelwert */
translate: 100px;
translate: 50%;

/* Zwei Werte */
translate: 100px 200px;
translate: 50% 105px;

/* Drei Werte */
translate: 50% 105px 5rem;

Values

Einzelwert <length-percentage> (en-US)
Ein Einzelwert als <länge> oder <prozentsatz>, der eine 2D-Verschiebung angibt, die eine gleiche Verschiebung entlang der X- und Y-Achse spezifiziert. Äquivalent zu einer Funktion translate() (2D-Übersetzung) mit zwei angegebenen Werten.
Zwei Werte <length-percentage> (en-US)
Zwei Werte als <länge> oder <prozentsatz>, wobei der erste Wert für die Verschiebung auf der X- und der Zweite auf der Y-Achse steht.
Drei Werte <length-percentage> (en-US)
Zwei Werte als <länge> oder <prozentsatz> und ein dritter Wert im Format <length>, die die Verchiebung auf der X-, Y-, und Z-Achse spezifizieren. Entspricht der Funktion translate3d() (3D-Verschiebung).
none
Gibt an, dass keine Verschiebung angewendet werden soll.

Formale Definition

Initialwertnone
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

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

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

Beispiel

HTML

<div>
  <p class="translate">Translation</p>
</div>

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.translate {
  transition: translate 1s;
}

div:hover .translate {
  translate: 200px 50px;
}

Result

Spezifikation

Spezifikation Status Kommentar
CSS Transforms Level 2
Die Definition von 'individual transforms' in dieser Spezifikation.
Bearbeiterentwurf Ursprüngliche Definition

Browser-Kompatibilität

BCD tables only load in the browser

See also

Note: skew is not an independent transform value