Präzisere Steuerung von CSS-Transformationen mit individuellen Transformationseigenschaften

Elemente mit den Eigenschaften translate, rotate und scale transformieren

Bramus
L. David Baron

Die CSS-Property transform

Wenn Sie einem Element Transformationen zuweisen möchten, verwenden Sie die CSS-Eigenschaft transform. Die Property akzeptiert eine oder mehrere <transform-function>, die nacheinander angewendet werden.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

Das ausgewählte Element wird um 50 % auf der X-Achse verschoben, um 30 Grad gedreht und schließlich auf 120 % skaliert.

Die Property transform funktioniert zwar einwandfrei, aber es wird etwas mühsam, wenn Sie einen dieser Werte einzeln ändern möchten.

Wenn Sie die Skalierung beim Hovering ändern möchten, müssen Sie alle Funktionen in der Transform-Eigenschaft duplizieren, auch wenn ihre Werte unverändert bleiben.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Die einzelnen Transformationseigenschaften

Beim Versand mit Chrome 104 handelt es sich um einzelne Eigenschaften für CSS-Transformationen. Die Attribute sind scale, rotate und translate. Mit ihnen können Sie diese Teile einer Transformation individuell definieren.

Damit schließt sich Chrome Firefox und Safari an, die diese Properties bereits unterstützen.

Unterstützte Browser

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1

Quelle

Wenn Sie das vorherige transform-Beispiel mit den einzelnen Properties neu schreiben, sieht Ihr Snippet so aus:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Die Reihenfolge ist wichtig

Ein wichtiger Unterschied zwischen der ursprünglichen CSS-Eigenschaft transform und den neuen Eigenschaften besteht in der Reihenfolge, in der die angegebenen Transformationen angewendet werden.

Mit transform werden die Transformationsfunktionen in der Reihenfolge angewendet, in der sie geschrieben werden – von links (außen) nach rechts (innen).

Bei den einzelnen Transformationseigenschaften entspricht die Reihenfolge nicht der Deklarationsreihenfolge. Die Reihenfolge ist immer gleich: zuerst translate (außen), dann rotate und dann scale (innen).

Das bedeutet, dass beide folgenden Code-Snippets dasselbe Ergebnis liefern:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

In beiden Fällen werden die Elemente im Targeting zuerst um 50% auf der X-Achse verschoben, dann um 30deg gedreht und schließlich um 1.2 skaliert.

Wenn eine der einzelnen Transformationseigenschaften zusammen mit einer transform-Eigenschaft deklariert wird, werden die einzelnen Transformationen zuerst angewendet (translate, rotate und dann scale), die transform-Transformation zuletzt (innen). Weitere Informationen finden Sie in der Spezifikation, in der definiert wird, wie die Transformationsmatrix berechnet werden soll.

Animationen

Diese Properties wurden hauptsächlich hinzugefügt, um Animationen zu vereinfachen. Angenommen, Sie möchten ein Element so animieren:

Keyframes-Grafik

transform verwenden

Wenn Sie diese Animation mit transform implementieren möchten, müssen Sie alle Zwischenwerte für alle definierten Transformationen berechnen und in jeden Keyframe aufnehmen. Um beispielsweise eine Rotation an der 10-%-Marke durchzuführen, müssen auch die Werte für die anderen Transformationen berechnet werden, da das Attribut transform alle Werte benötigt.

Keyframes-Diagramm mit berechneten Zwischenwerten

Der resultierende CSS-Code sieht dann so aus:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Einzelne Transformationseigenschaften verwenden

Mit individuellen Transformationsattributen wird dies viel einfacher zu schreiben. Anstatt alle Transformationen von Keyframe zu Keyframe zu ziehen, können Sie jede Transformation einzeln anvisieren. Außerdem müssen Sie nicht mehr alle Zwischenwerte berechnen.

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Einzelne Transformierungseigenschaften und mehrere Frames verwenden

Um Ihren Code modular zu gestalten, können Sie jede Unteranimation in eigene Keyframes unterteilen.

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

Dank dieser Aufteilung können Sie jeden einzelnen Satz von Keyframes beliebig anwenden, da sich die transform-Eigenschaften, die jetzt zu einzelnen Eigenschaften wurden, sich nicht mehr gegenseitig überschreiben. Darüber hinaus können Sie jeder Transformation ein anderes Timing zuweisen, ohne das Ganze neu schreiben zu müssen.

Leistung

Animationen mit diesen neuen Properties sind genauso effizient wie Animationen der vorhandenen transform-Property.

translate-, rotate- und scale-Animationen werden im Renderer genauso ausgeführt wie transform-Animationen. Sie haben also dieselbe positive Auswirkung auf die Animationen wie transform.

Diese neuen Properties funktionieren auch mit dem Attribut will-change. Im Allgemeinen ist es am besten, eine übermäßige Verwendung von will-change zu vermeiden. Verwenden Sie es bei einer minimalen Anzahl von Elementen und für einen möglichst kurzen Zeitraum. Es ist aber auch gut, so konkret wie möglich zu sein. Wenn Sie beispielsweise will-change verwenden, um eine Animation mit den Properties rotate und filter zu optimieren, sollten Sie dies mit will-change: rotate, filter deklarieren. Das ist etwas besser als die Verwendung von will-change: transform, filter, wenn Sie rotate und filter animieren, da einige der Datenstrukturen, die Chrome bei Verwendung von will-change im Voraus erstellt, für transform und rotate unterschiedlich sind.

Teil der neu interoperablen Reihe