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 verkleinert oder vergrößert. Da der Skalierungsgrad durch einen Vektor [sx, sy] definiert ist, kann sie die horizontalen und vertikalen Dimensionen mit 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 Skalierungstransformation wird durch einen zweidimensionalen Vektor charakterisiert. Dessen Koordinaten bestimmen, wie viel Skalierung in jeder Richtung erfolgt. Wenn beide Koordinaten gleich sind, ist die Skalierung einheitlich (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; wenn innerhalb, 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
scale(sx)
scale(sx, sy)
Werte
sx-
Ein
<number>oder<percentage>, der die Abszisse (horizontal, x-Komponente) des Skalierungsvektors darstellt. syOptional-
Ein
<number>oder<percentage>, der die Ordinate (vertikal, y-Komponente) des Skalierungsvektors darstellt. Wenn nicht definiert, ist der Standardwertsx, was zu einer gleichmäßigen Skalierung führt, die das Seitenverhältnis des Elements beibehält.
| Karthesische Koordinaten auf ℝ^2 | Homogene Koordinaten auf ℝℙ^2 | Karthesische Koordinaten auf ℝ^3 | Homogene Koordinaten auf ℝℙ^3 |
|---|---|---|---|
|
|
|
|
|
[sx 0 0 sy 0 0] |
Formale Syntax
<scale()> =
scale( <number> , <number>? )
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 Steuerung bereitstellen, die den Benutzern ermöglicht, Animationen abzuschalten, idealerweise seitenweit.
Erwägen Sie auch die Verwendung des prefers-reduced-motion Media-Features — verwenden Sie es, um eine Media-Abfrage zu schreiben, die Animationen deaktiviert, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animation festgelegt hat.
Mehr erfahren:
Beispiele
Skalierung der X- und Y-Dimensionen zusammen
HTML
<div>Normal</div>
<div class="scaled">Scaled</div>
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
<div>Normal</div>
<div class="scaled">Scaled</div>
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
Loading…