scale()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die scale() CSS Funktion definiert eine Transformation, die ein Element in der 2D-Ebene in der Größe verändert. Da die Menge der Skalierung durch einen Vektor [sx, sy] definiert wird, kann sie die horizontalen und vertikalen Dimensionen in unterschiedlichen Maßstäben anpassen. Ihr 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 ist durch einen zweidimensionalen Vektor charakterisiert. Dessen Koordinaten bestimmen, wie viel Skalierung in jeder Richtung vorgenommen wird. Wenn beide Koordinaten gleich sind, ist die Skalierung gleichmäßig (isotrop) und das Seitenverhältnis des Elements bleibt erhalten (dies ist eine homothetische Transformation).

Wenn ein Koordinatenwert außerhalb des Bereichs [-1, 1] liegt, wächst das Element entlang dieser Dimension; liegt der Wert innerhalb, schrumpft er. Ein negativer Wert führt zu einer Punktspiegelung in dieser Dimension. Der Wert 1 hat keine Auswirkung.

Hinweis: Die scale() Funktion skaliert nur in 2D. Um in 3D zu skalieren, verwenden Sie stattdessen scale3d().

Syntax

Die scale() Funktion wird mit entweder einem oder zwei Werten spezifiziert, die die Menge der in jeder Richtung anzuwendenden Skalierung darstellen.

css
scale(sx)

scale(sx, sy)

Werte

sx

Eine <number> oder <percentage>, die die Abszisse (horizontal, x-Komponente) des Skalierungsvektors darstellt.

sy

Eine <number> oder <percentage>, die die Ordinate (vertikal, y-Komponente) des Skalierungsvektors darstellt. Wenn nicht definiert, ist der Standardwert sx, was zu einer gleichmäßigen Skalierung führt, die das Seitenverhältnis des Elements beibehält.

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3
(sx00sy)\left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)
(sx000sy0001)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)
(sx000sy0001)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)
(sx0000sy0000100001)\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[sx 0 0 sy 0 0]

Formale Syntax

<scale()> = 
  scale( [ <number> | <percentage> ]#{1,2} )

Barrierefreiheit

Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie häufig bestimmte Arten von Migräne auslösen. Wenn Sie solche Animationen auf Ihrer Website einbinden müssen, sollten Sie eine Steuerungsmöglichkeit bieten, damit Nutzer Animationen abschalten können, vorzugsweise weltweit auf der gesamten Website.

Zudem sollten Sie die Verwendung der prefers-reduced-motion Media Feature in Betracht ziehen — verwenden Sie sie, um eine Media Query zu erstellen, die Animationen abschaltet, wenn der Nutzer in seinen Systemeinstellungen reduzierte Animationen festgelegt hat.

Mehr erfahren:

Beispiele

Skalierung der X- und Y-Dimensionen zusammen

HTML

html
<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

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

Skalieren der X- und Y-Dimensionen separat und Verschieben des Ursprungs

HTML

html
<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch