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.
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 Standardwertsx
, 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 |
---|---|---|---|
|
|
|
|
[sx 0 0 sy 0 0] |
Formale Syntax
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
<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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scale() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support