CSS/Eigenschaften/translate

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 oder zwei Längenangabee oder Prozentangaben Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: 0
anwendbar auf	alle Elemente (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	ja, als Transformation

Beispiel

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

Das obere Beispiel verschiebt eine Form mit der neuen CSS-Eigenschaft translate. Sie erfordert ein oder zwei mit Leerzeichen getrennte Werte.
Die Form .box wird mit transform skaliert. Als Wert wird die translate-Funktion mit zwei kommaseparierten Wert innerhalb der Klammer verwendet.

Beachten Sie: Die Syntax für den Wert unterscheidet sich von der der transform-Eigenschaft.

Weblinks

• Spezifikation (W3C): Individual Transform Properties: the translate, scale, and rotate properties
• MDN: rotate
• css-tricks: CSS Individual Transform Properties in Safari Technology Preview vom 30.12.2020

Siehe auch

• CSS/Tutorials/Transform