scale

Baseline Widely available

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

Die scale CSS Eigenschaft ermöglicht es Ihnen, Skalentransformationen individuell und unabhängig von der transform Eigenschaft anzugeben. Dies passt besser zu typischen Benutzeroberflächenanwendungen und erspart es Ihnen, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im transform-Wert angegeben werden müssen.

Probieren Sie es aus

Syntax

css
/* Keyword values */
scale: none;

/* Single values */
/* values of more than 1 or 100% make the element grow */
scale: 2;
/* values of less than 1 or 100% make the element shrink */
scale: 50%;

/* Two values */
scale: 2 0.5;

/* Three values */
scale: 200% 50% 200%;

/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;

Werte

Einzelwert

Ein <number> oder <percentage>, das einen Skalierungsfaktor angibt, um das betroffene Element entlang sowohl der X- als auch der Y-Achse zu skalieren. Entspricht einer scale() (2D-Skalierung) Funktion mit einem einzigen angegebenen Wert.

Zwei Werte

Zwei <number> oder <percentage> Werte, die die Skalierungswerte der X- und Y-Achse (jeweils) einer 2D-Skalierung angeben. Entspricht einer scale() (2D-Skalierung) Funktion mit zwei angegebenen Werten.

Drei Werte

Drei <number> oder <percentage> Werte, die die Skalierungswerte der X-, Y- und Z-Achse (jeweils) einer 3D-Skalierung angeben. Entspricht einer scale3d() (3D-Skalierung) Funktion.

none

Gibt an, dass keine Skalierung angewendet werden soll.

Formale Definition

Anfangswertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypTransformation
Erstellt StapelkontextJa

Formale Syntax

Beispiele

Skalierung eines Elements beim Hover

Das folgende Beispiel zeigt, wie ein Element beim Hover skaliert wird. Zwei Kästchen werden gezeigt, eines mit einem einzigen scale-Wert, der das Element entlang beider Achsen skaliert. Das zweite Kästchen hat zwei scale-Werte, die das Element unabhängig entlang der X- und Y-Achse skalieren.

HTML

html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>

CSS

css
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# individual-transforms

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scale
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch

Hinweis: skew ist kein unabhängiger Transformationswert