scale()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die scale() CSS Funktion definiert eine Transformation, die ein Element auf der 2D-Ebene skaliert. Da die Skalierungsmenge durch einen Vektor [sx, sy] definiert wird, können die horizontalen und vertikalen Dimensionen in unterschiedlichen Maßstäben skaliert werden. Das Ergebnis ist ein <transform-function> Datentyp.
Probieren Sie es aus
transform: scale(1); transform: scale(0.7); transform: scale(1.3, 0.4); transform: scale(-0.5, 1); <section id="default-example"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </section> Diese Skalierungstransformation wird durch einen zweidimensionalen Vektor charakterisiert. Seine Koordinaten definieren, wie viel Skalierung in jeder Richtung vorgenommen wird. Wenn beide Koordinaten gleich sind, ist die Skalierung einheitlich (isotrop) und das Seitenverhältnis des Elements wird beibehalten (dies ist eine homothetische Transformation).
Wenn ein Koordinatenwert außerhalb des Bereichs [-1, 1] liegt, wächst das Element in dieser Dimension; wenn er innerhalb liegt, schrumpft es. Ein negativer Wert führt zu einer Punktspiegelung in dieser Dimension. Der Wert 1 hat keinen Effekt.
Hinweis: Die scale() Funktion skaliert nur in 2D. Um in 3D zu skalieren, verwenden Sie stattdessen scale3d().
Syntax
scale(sx) scale(sx, sy) Werte
sx-
Ein
<number>oder<percentage>der die Abszisse (horizontal, x-Komponente) des Skalierungsvektors darstellt. syOptional-
Ein
<number>oder<percentage>der die Ordinate (vertikal, y-Komponente) des Skalierungsvektors darstellt. Wenn nicht definiert, ist der Standardwertsx, was eine einheitliche Skalierung zur Folge hat, die das Seitenverhältnis des Elements beibehält.
| Kartesische Koordinaten auf ℝ^2 | Homogene Koordinaten auf ℝℙ^2 | Kartesische Koordinaten auf ℝ^3 | Homogene Koordinaten auf ℝℙ^3 |
|---|---|---|---|
| | | | |
[sx 0 0 sy 0 0] |
Formale Syntax
<scale()> =
scale( <number> , <number>? )
Barrierefreiheit
Skalierungs-/Zoomen-Animationen sind problematisch für die Barrierefreiheit, da sie häufig ein Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Website verwenden müssen, sollten Sie eine Steuerung bereitstellen, die es den Nutzern erlaubt, Animationen zu deaktivieren, vorzugsweise site-weit.
Überlegen Sie auch, die Medienfunktion prefers-reduced-motion zu nutzen — verwenden Sie sie, um eine Media Query zu schreiben, die Animationen ausschaltet, wenn der Nutzer in seinen Systemeinstellungen reduzierte Animationen angegeben hat.
Erfahren Sie mehr:
Beispiele
Die X- und Y-Dimensionen zusammen skalieren
HTML
<div>Normal</div> <div class="scaled">Scaled</div> CSS
div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ background-color: pink; } Ergebnis
Die X- und Y-Dimensionen separat skalieren und den Ursprung verschieben
HTML
<div>Normal</div> <div class="scaled">Scaled</div> CSS
div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ transform-origin: left; background-color: pink; } Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-scale |