SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
CSS/Funktionen/scale()
Aus SELFHTML-Wiki
< CSS | Funktionen (Weitergeleitet von Scale())
Die scale()-Funktion definiert eine Transformation, die die Größe eines Elements in der 2D-Ebene ändert. Da der Umfang der Skalierung durch einen Vektor definiert wird, kann die Größe der horizontalen und vertikalen Dimensionen in verschiedenen Maßstäben geändert werden. Ihr Ergebnis ist ein Datentyp <Transformationsfunktion>.
| Parameter |
|
|---|---|
| anwendbar auf | * HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen
|
| Browsersupport | caniuse: mdn-css_types_transform-function_scale |
Beispiel
@keyframes scaling { 0%{ transform: scale(1);} 20%{ transform: scale(2);} 40%{ transform: scale(0.5);} 60%{ transform: scale(0);} 80%{ transform: scale(-1);} 100%{ transform: scale(1);} } .box { animation: scaling 10s steps(1) infinite; }
Die Box wird mehrfach skaliert. Die entsprechende Animation enthält eine Angabe von steps, damit sie nicht allmählich animiert und dabei evtl. ruckelt, sondern dies in verschiedenen Schritten anzeigt.
Weblinks
- CSSWG: The Transform Functions CSS Transforms Module Level 2
- 2D Transform Functions CSS Transforms Module Level 1
- MDN: scale()