Besuchen Sie unseren Adventskalender 2022!

CSS/Funktionen/translate()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch