Scale | CSS-Tricks

Die scale-Eigenschaft in CSS skaliert die Breite und Höhe eines Elements proportional. Wenn wir also ein Element haben, das 100 Pixel quadratisch ist, verdoppelt die Skalierung mit einem Wert von 2 die Abmessungen auf 200 Pixel quadratisch. Ebenso verringert ein Skalierungswert von .5 die Abmessungen um die Hälfte, was zu 50 Pixel quadratisch führt.

.element {
  width: 20px;
  height: 20px;
  scale: 2; /* Results in 40 pixels square */
}

Es gibt zufällig noch eine weitere Möglichkeit, Elemente zu skalieren, nämlich die Verwendung der Funktion scale() für die Eigenschaft transform, á la

.element {
  width: 20px;
  height: 20px;
  transform: scale(2); /* Results in 40 pixels square */
}

…die CSS-scale-Eigenschaft tut dies unabhängig von der transform-Eigenschaft, was uns etwas mehr Flexibilität gibt, Dinge zu skalieren, ohne den Effekt mit anderen Transformationen verketten zu müssen.

Syntax

scale: none | <number>{1,3};

Die scale-Eigenschaft akzeptiert das Schlüsselwort none oder bis zu drei numerische Werte. Ein einzelner numerischer Wert skaliert das Element entlang der X- (horizontal) und Y- (vertikal) Achse mit demselben Wert. Wenn zwei Werte angegeben werden, skaliert der erste die X-Achse und der zweite die Y-Achse. Wenn drei Werte angegeben werden, entspricht der dritte Wert der Z-Achse, die die Tiefe des Elements in einem 3D-Kontext skaliert (es ist zufällig das Äquivalent der Verwendung von transform: scale3d().

Initial: none
Gilt für: transformierbare Elemente
Vererbt: nein
Berechneter Wert: wie angegeben
Animationstyp: eine Transformation
Erzeugt Stapelkontext: ja

Werte

/* Keyword values */
scale: none;

/* Single values */
scale: 2;
scale: 0.25;

/* Two values */
scale: 2 1;

/* Three values */
scale: 1 1.5 2;

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

none: Dies bedeutet, dass keine Skalierung auf das Element angewendet wird; effektiv dasselbe wie scale: 1.
<number>{1,3}: Dies besagt, dass die Eigenschaft bis zu drei Werte akzeptiert, die zur Multiplikation der Abmessungen des Elements verwendet werden.

Skalierung verfälscht nicht den natürlichen Layoutfluss

Es ist wichtig zu wissen, dass die scale-Eigenschaft nicht dazu führt, dass andere Elemente wie die scale()-Transformationsfunktion um sie herum fließen. Das bedeutet, dass die Skalierung eines Elements nicht dazu führt, dass sich die umgebenden Elemente neu anordnen, um mehr oder weniger Platz basierend auf der Skalierung dieses Elements zu schaffen.

Skalierung betrifft Kind- und Nachfahrelemente

Eine weitere Sache ist, dass die scale-Eigenschaft alle Nachfahren eines Elements skaliert. Wenn wir zum Beispiel Text innerhalb des Elements haben. Das Ändern der Skalierung des Elements skaliert sowohl das Element als auch den Text.

Übergänge und Animationen

Und ja, wir können scale in CSS-Übergängen und Animationen verwenden. Wir können beispielsweise jedes Element nahtlos zwischen Skalierungen übergehen lassen, z. B. beim Hovern.

Wir können sogar etwas kreativer werden, wenn wir scale mit anderen unabhängigen Transformationseigenschaften kombinieren, wie z. B. translate

Fallback-Optionen

Während die Browserunterstützung für die CSS-scale-Eigenschaft und andere unabhängige Transformationseigenschaften wächst, ist es wahrscheinlich ratsam, die Unterstützung beim Verwenden von scale zu prüfen.

.box:hover {
  transform: scale(2); /* Fallback to this */
}

@supports (scale: 1) {
  .box:hover {
    scale: 2; /* Used if support for `scale` is detected */
  }
}