CSS/Funktionen/scale3d()

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

• CSSWG: Scale3D CSS Transforms Module Level 2
• MDN: scale3D()

Siehe auch

• Transform
  • Transform#transform-Eigenschaft
  • SVG-Transformationen
• CSS/Eigenschaften/scale