SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
CSS/Funktionen/scale3d()
Aus SELFHTML-Wiki
< CSS | Funktionen
Die scale3d()-Funktion definiert eine Transformation, die die Größe eines Elements im 3D-Raum ändert. Da das Ausmaß der Skalierung durch einen Vektor definiert wird, kann die Größe verschiedener 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_scale3d |
Beispiel
@keyframes skalierung { 0% { transform: scale3d(1, 1, 1); } 17% { transform: scale3d(1, 2, 1); } 33% { transform: scale3d(1, 2, 2); } 50% { transform: scale3d(2, 2, 2); } 67% { transform: scale3d(2, 2, 1); } 83% { transform: scale3d(2, 1, 1); } 100% { transform: scale3d(1, 1, 1); } } .cube { animation: skalierung 5s infinite linear; }
Dieses Beispiel zeigt, wie ein Würfel zu einem Quader gestreckt und anschließend wieder gestaucht wird.