CSS/Eigenschaften/translate

Der Begriff translate ist mehrdeutig.
Außer der CSS-Eigenschaft gibt es noch das HTML-translate-Attribut, das Browsern erlaubt, Inhalte automatisch zu übersetzen.

Browserunterstützung
caniuse.com

Die Eigenschaft translate verschiebt die Form eines HTML-Elementes. Sie wurde im CSS Transforms Module Level 2 aus der transform-Eigenschaft herausgelöst.

Erlaubte Werte

• ein, zwei oder drei Längenangaben oder Prozentangaben

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja, als Transformation

Beispiel

:hover .kreis {  
   translate: 100px 50%;
  }
/* entspricht: */
:hover .box {  
   transform: translate(100px, 50%);
  }

Das obere Beispiel .kreis verschiebt eine Form mit der neuen CSS-Eigenschaft translate. Sie erhält wie bei CSS üblich - zwei mit Leerzeichen getrennte Werte.

Die Form .box wird mit der älteren transform-Eigenschaft skaliert. Als Wert wird die translate()-Funktion mit zwei kommaseparierten Wert innerhalb der Klammer verwendet.

Beachten Sie: Ein Prozentwert bezieht sich auf die Breite des verschobenen Elements, nicht den verfügbaren Platz im Elternelement.

Siehe auch

• Transform
  • translate

Weblinks

• Spezifikation (CSSWG): Individual Transform Properties: the translate, scale, and rotate properties
• MDN: ranslate
• css-tricks: CSS Individual Transform Properties in Safari Technology Preview vom 30.12.2020
• Details: caniuse.com