CSS/Funktionen/scale3d()

Aus SELFHTML-Wiki
< CSS‎ | Funktionen(Weitergeleitet von Scale3d())
Wechseln zu: Navigation, Suche

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
  • ein Zahlenwert für die Abzisse der Skalierung,
  • ein Zahlenwert für die Ordinate
  • ein Zahlenwert für die Z-Achse
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 nacheinander zu einem Quader gestreckt und anschließend wieder gestaucht wird.


Weblinks

Siehe auch