Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Siehe auch
Hinweis: skew ist kein unabhängiger Transformationswert