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 |
|
---|---|
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%);
}
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
Liste der CSS-Eigenschaften
- Rahmen
- border
- border-radius
- border-image
- border-collapse
- border-spacing
- box-decoration-break
- box-shadow
- outline
- outline-offset
- rotate
- scale
- transform
- transform-origin
- transform-style
- translate
- perspective
- perspective-origin
- backface-visibility
- Abstände
- Benutzeroberfläche
- generierter Inhalt
- Größenangaben
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Positionierung und Anzeige
- Schriftformatierung
- Textausrichtung
- Animationen
Die Form
.box
wird mit transform skaliert. Als Wert wird die translate-Funktion mit zwei kommaseparierten Wert innerhalb der Klammer verwendet.