CSS/Funktionen/translate()

Die translate()-Funktion positioniert ein Element in horizontaler und/oder vertikaler Richtung neu. Ihr Ergebnis ist ein Datentyp <Transformationsfunktion>.

Parameter	eine (positive oder negative) Längenangabe für die horizontale Verschiebung, eine (optionale) Längenangabe für die vertikale Verschiebung Wenn nur ein Wert angegeben wird, wird nur die x-Achse verschoben.
anwendbar auf	* HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen SVG-Elemente
Browsersupport	caniuse: mdn-css_types_transform-function_translate

Beispiel

aside {
  transform: translate(50%, 100px);
}

Ein Prozentwert bezieht sich auf die Breite des verschobenen Elements, nicht auf die eventuell verfügbare Breite des Elternelements

Beachten Sie: Transform-Funktionen benötigen

• in CSS Maßeinheiten
• in SVG dimensionslose Größen/ Zahlenwerte ohne Maßeinheiten

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: translate()

Siehe auch

• Transform
  • Transform#transform-Eigenschaft
  • SVG-Transformationen
• CSS/Eigenschaften/translate