translate - CSS

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

Initialwert	`none`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Prozentwerte	bezieht sich auf die Größe der äußeren Box
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	Transformation
Erstellt Stapelkontext	Ja

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