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 Skalierungsfaktor durch einen Vektor [sx, sy] definiert ist, kann er die horizontalen und vertikalen Dimensionen in unterschiedlichen Maßstäben skalieren. Das Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Diese Skalierungstransformation ist durch einen zweidimensionalen Vektor gekennzeichnet. Seine Koordinaten bestimmen, wie viel in jede Richtung skaliert 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 [-1, 1] Bereichs liegt, wächst das Element in dieser Dimension; wenn innerhalb, schrumpft es. Ein negativer Wert führt zu einer Punktspiegelung in dieser Dimension. Der Wert 1 hat keine Wirkung.

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 Größe der Skalierung angeben, die in jeder Richtung angewendet wird.

css
scale(sx)

scale(sx, sy)

Werte

sx

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

sy

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

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3
( sx 0 0 sy ) \left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)
( sx 0 0 0 sy 0 0 0 1 ) \left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)
( sx 0 0 0 sy 0 0 0 1 ) \left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)
( sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 ) \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]

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 integrieren müssen, sollten Sie eine Steuerung anbieten, die es den Benutzern ermöglicht, Animationen zu deaktivieren, vorzugsweise für die gesamte Seite.

Erwägen Sie außerdem die Verwendung des prefers-reduced-motion Media-Features — verwenden Sie es, um eine Media Query zu schreiben, die Animationen ausschaltet, wenn der Benutzer verringerte Animation in seinen Systemeinstellungen angegeben hat.

Erfahren Sie mehr:

Beispiele

X- und Y-Dimensionen gemeinsam skalieren

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

X- und Y-Dimensionen separat skalieren und den Ursprung verschieben

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