scale()

Baseline Widely available

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

Die scale() CSS Funktion definiert eine Trans­formation, die ein Element auf der 2D-Ebene neu dimensioniert. Da die Skalierungs­größe durch einen Vektor [sx, sy] definiert ist, kann sie die horizontalen und vertikalen Dimensionen in unterschiedlichen Maßstäben neu dimensionieren. 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 gekennzeichnet. Ihre Koordinaten definieren, 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 [-1, 1] Bereichs liegt, wächst das Element entlang 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

css
scale(sx)

scale(sx, sy)

Werte

sx

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

sy Optional

Eine <number> oder <percentage>, die die Ordinate (vertikal, y-Komponente) des Skalierungsvektors darstellt. Wenn nicht definiert, ist der Standardwert sx, was eine gleichmäßige Skalierung ergibt, 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 ein häufiger Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Website einbinden müssen, sollten Sie eine Steuerungsmöglichkeit bieten, um den Benutzern zu ermöglichen, Animationen abzuschalten, vorzugsweise über die gesamte Website hinweg.

Ziehen Sie auch in Betracht, die prefers-reduced-motion Media-Feature zu nutzen — verwenden Sie sie, um eine Media-Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer reduzierte 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

Siehe auch