CSS/Funktionen/scale()

Browserunterstützung
caniuse.com

Die CSS-Funktion scale() definiert eine Transformation, die die Größe eines Elements in der 2D-Ebene ändert. Da der Umfang der Skalierung durch einen Vektor definiert wird, kann die Größe der horizontalen und vertikalen 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
• SVG-Elemente

Parameter

* eine (positive oder negative) Längenangabe für die Abzisse der Streckung,

• eine (optionale) Längenangabe für die Ordinate
  Wenn nur ein Wert angegeben wird, wird nur entlang der x-Achse gestreckt.

Beispiel

@keyframes scaling {
    0%{ transform: scale(1);}
   20%{ transform: scale(2);}
   40%{ transform: scale(0.5);}
   60%{ transform: scale(0);}
   80%{ transform: scale(-1);}
  100%{ transform: scale(1);}   
}
.box { 
    animation: scaling 10s steps(1) infinite;
}

Die Box wird mehrfach skaliert. Die entsprechende Animation enthält eine Angabe von steps(), damit sie nicht allmählich animiert und dabei evtl. ruckelt, sondern dies in verschiedenen Schritten anzeigt.

Siehe auch

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

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: scale()
• Browser-Support: caniuse.com