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 auf der 2D-Ebene skaliert. Da der Umfang der Skalierung durch einen Vektor [sx, sy] definiert wird, kann er die horizontalen und vertikalen Dimensionen in unterschiedlichen Maßstäben vergrößern. Das Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Diese Skalentransformation wird durch einen zweidimensionalen Vektor charakterisiert. Dessen Koordinaten definieren, wie viel in jede Richtung skaliert wird. Sind beide Koordinaten gleich, 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 in dieser Dimension; innerhalb des Bereichs 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

Die scale() Funktion wird mit entweder einem oder zwei Werten angegeben, die die Menge der Skalierung darstellen, die in jeder Richtung angewandt werden soll.

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 Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen in Ihre Website einbinden müssen, sollten Sie eine Steuerungsmöglichkeit bieten, damit Benutzer Animationen deaktivieren können, vorzugsweise für die gesamte Website.

Erwägen Sie auch die Nutzung des prefers-reduced-motion Medienfeatures — verwenden Sie es, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer reduzierte Animationen in seinen Systemeinstellungen spezifiziert hat.

Erfahren Sie mehr:

Beispiele

Skalierung der X- und Y-Dimensionen gemeinsam

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

Skalierung der X- und Y-Dimensionen separat und Verschiebung 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