CSS/Eigenschaften/translate
Aus SELFHTML-Wiki
< CSS | Eigenschaften
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
undrevert
- 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%);
}
Beachten Sie: Ein Prozentwert bezieht sich auf die Breite des verschobenen Elements, nicht den verfügbaren Platz im Elternelement.
Siehe auch
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
Liste der CSS-Eigenschaften
.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.