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

Probieren Sie es aus

Diese Skalierungstransformation wird durch einen zweidimensionalen Vektor charakterisiert. Dessen Koordinaten definieren, wie viel Skalierung in jede Richtung erfolgt. 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; 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 angegeben, die den Skalierungsgrad in jeder Richtung 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 bewahrt.

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- bzw. Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie häufig Migräne auslösen. Wenn Sie solche Animationen auf Ihrer Website einbauen müssen, sollten Sie eine Steuerungsmöglichkeit bereitstellen, mit der Nutzer Animationen deaktivieren können, vorzugsweise auf der gesamten Website.

Ziehen Sie außerdem in Betracht, die prefers-reduced-motion Media-Feature zu nutzen — verwenden Sie sie, um eine Media Query zu schreiben, die Animationen ausschaltet, wenn der Nutzer reduzierte Animation in seinen Systemeinstellungen 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scale()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch