CSS/Funktionen/scale3d()

Browserunterstützung
caniuse.com

Die CSS-Funktion scale3d() 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>

anwendbar auf

• HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen

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.

Siehe auch

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

Weblinks

• CSSWG: Scale3D CSS Transforms Module Level 2
• MDN: scale3D()
• Browser-Support: caniuse.com