CSS/Eigenschaften/scale

Browserunterstützung
caniuse.com

Die Eigenschaft scale skaliert (streckt, staucht oder verzerrt) die Form eines HTML- oder SVG-Elements. Sie wurde im CSS Transforms Module Level 2 aus der transform-Eigenschaft herausgelöst.

Erlaubte Werte

• ein, zwei oder drei Zahlen oder Prozentangaben
• Zahlenangabe mit dem Schlüsselwort X Y Z

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

1

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja, als Transformation

Beispiel

:hover .kreis {  
   scale: 2 0.5;
  }
/* entspricht: */
:hover .box {  
   transform: scale(2, 0.5);
  }

Das obere Beispiel skaliert eine Form mit der neuen CSS-Eigenschaft scale. Sie erfordert einen, zwei oder drei mit Leerzeichen getrennte Werte.
Die Form .box wird mit transform skaliert. Als Wert wird die scale()-Funktion mit zwei kommaseparierten Wert innerhalb der Klammer verwendet.

Beachten Sie: Wenn der Y-Wert nicht angegeben wird, ist er standardmäßig der gleiche wie der X-Wert.

Wenn der Z-Wert nicht angegeben wird, ist er standardmäßig 1.

Wenn der dritte Wert weggelassen, 1 oder 100% ist, wird eine 2D-Skalierung angegeben, die der scale()-Funktion entspricht. Andernfalls wird eine 3D-Skalierung angegeben, die der scale3d()-Funktion entspricht.

Siehe auch

• Transform
  • scale

Weblinks

• Spezifikation (CSSWG): Individual Transform Properties: the translate, scale, and rotate properties
• MDN: scale
• css-tricks: CSS Individual Transform Properties in Safari Technology Preview vom 30.12.2020
• Details: caniuse.com