scale CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2022 browserübergreifend verfügbar.
Die scale-CSS-Eigenschaft ermöglicht es Ihnen, Skalentransformationen individuell und unabhängig von der transform-Eigenschaft zu definieren. Dies passt besser zu typischen Benutzeroberflächenanwendungen und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im transform-Wert angegeben werden müssen.
Probieren Sie es aus
scale: none;
scale: 1.5;
scale: 1.7 50%;
scale: 1 -1;
scale: 1.2 1.2 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
Syntax
/* 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
- Einzelner Wert
-
Eine
<number>oder<percentage>Angabe eines Skalierungsfaktors, durch den das betroffene Element entlang beider Achsen X und Y skaliert wird. Entspricht einerscale()-Funktion (2D-Skalierung) mit einem angegebenen Wert. - Zwei Werte
-
Zwei
<number>oder<percentage>Werte, die die Skalierungswerte der X- und Y-Achse (jeweils) einer 2D-Skalierung angeben. Entspricht einerscale()-Funktion (2D-Skalierung) 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 einerscale3d()-Funktion (3D-Skalierung). none-
Gibt an, dass keine Skalierung angewendet werden soll.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | transformierbare Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Transformation |
| Erstellt Stapelkontext | Ja |
Formale Syntax
scale =
none |
[ <number> | <percentage> ]{1,3}
Beispiele
Skalieren eines Elements beim Hover
Das folgende Beispiel zeigt, wie man ein Element beim Hover skaliert.
Es werden zwei Boxen angezeigt, eine mit einem einzelnen scale-Wert, der das Element entlang beider Achsen skaliert.
Die zweite Box hat zwei scale-Werte, die das Element entlang der X- und Y-Achse unabhängig skalieren.
HTML
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
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
| Spezifikation |
|---|
| CSS Transforms Module Level 2 # individual-transforms |
Browser-Kompatibilität
Siehe auch
Hinweis: skew ist kein unabhängiger Transformationswert