`scale()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die scale() CSS Funktion definiert eine Transformation, die ein Element auf der 2D-Ebene vergrößert oder verkleinert. Da die Skalierung durch einen Vektor [sx, sy] definiert ist, kann sie die horizontalen und vertikalen Dimensionen in unterschiedlichen Maßstäben verändern. Das 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 Skalentransformation wird durch einen zweidimensionalen Vektor charakterisiert. Dessen Koordinaten definieren, wie viel Skalierung in jede 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; wenn er innerhalb liegt, 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 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
$\left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)$	$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\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> , <number>? )

Barrierefreiheit

Skalierungs-/Zoom-Animationen sind im Hinblick auf die Barrierefreiheit problematisch, da sie ein häufiger Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Website einfügen müssen, sollten Sie eine Steuerung bereitstellen, mit der Benutzer Animationen deaktivieren können, vorzugsweise site-weit.

Berücksichtigen Sie auch die Verwendung des prefers-reduced-motion Media Features — verwenden Sie es, um eine Media Query zu schreiben, die Animationen deaktiviert, wenn der Benutzer reduzierte Animationen in seinen Systemeinstellungen angegeben 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;
}