CSS/Funktionen/scale()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die scale()-Funktion 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>.

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.
anwendbar auf * HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen
  • SVG-Elemente
Browsersupport caniuse: mdn-css_types_transform-function_scale
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.


Weblinks

Siehe auch