Diescale()CSSFunktion 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>  <img          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 einehomothetische 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 einerPunktspiegelung in dieser Dimension. Der Wert1 hat keinen Effekt.

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 dasSeitenverhältnis des Elements beibehält.

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 Medienfunktionprefers-reduced-motion zu nutzen — verwenden Sie sie, um eineMedia Query zu schreiben, die Animationen ausschaltet, wenn der Nutzer in seinen Systemeinstellungen reduzierte Animationen angegeben hat.

Erfahren Sie mehr:

• MDN Verstehen von WCAG, Richtlinie 2.3 Erklärungen
• Verstehen des Erfolgskriteriums 2.3.3 | W3C Verstehen von WCAG 2.1

Beispiele

Die X- und Y-Dimensionen zusammen skalieren

HTML

<div>Normal</div><div>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>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

Browser-Kompatibilität

Siehe auch

• transform
• scale
• zoom
• <transform-function>
• scale3d()
• Weitere einzelne Transformations-Eigenschaftentranslate undrotate