scale()

Baseline Widely available

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

Die scale() CSS Funktion definiert eine Transformation, die ein Element auf der 2D-Ebene skaliert. Da der Skalierungsgrad 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

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 wird durch einen zweidimensionalen Vektor charakterisiert. Seine Koordinaten definieren, wie stark in jeder 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 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 keine Auswirkung.

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: Ein <number> oder <percentage>, der die Abszisse (horizontal, x-Komponente) des Skalierungsvektors darstellt.
sy Optional: Ein <number> oder <percentage>, der 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> | <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 einbauen müssen, sollten Sie eine Steuerung bereitstellen, die es den Nutzern ermöglicht, Animationen zu deaktivieren, vorzugsweise sitenweit.

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

Weitere Informationen:

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 getrennt und Verschieben 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

Siehe auch

transform
scale
zoom
<transform-function>
scale3d()
Andere einzelne Transformations-Eigenschaften translate und rotate

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden