Elemente mit den Attributen translate, rotate und scale transformieren
Die CSS-Eigenschaft transform
Um Transformationen auf ein Element anzuwenden, verwenden Sie die CSS-transform-Eigenschaft. Die Property akzeptiert eine oder mehrere <transform-function>-Werte, die nacheinander angewendet werden.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
Das Zielelement wird um 50% auf der X-Achse verschoben, um 30 Grad gedreht und schließlich auf 120 % skaliert.
Die transform-Eigenschaft funktioniert zwar problemlos, es wird jedoch etwas mühsam, wenn Sie einen dieser Werte einzeln ändern möchten.
Wenn Sie die Skalierung beim Bewegen des Mauszeigers ändern möchten, müssen Sie alle Funktionen in der Transformationseigenschaft 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 Transformationsattribute
Der Versand mit Chrome 104 ist einzelne Eigenschaften für CSS-Transformationen. Die Attribute sind scale, rotate und translate, mit denen Sie diese Teile einer Transformation individuell definieren können.
So wird Chrome in Firefox und Safari integriert, da diese Eigenschaften bereits unterstützt werden.
Wenn Sie das vorherige transform-Beispiel mit den einzelnen Attributen umformulieren, sieht Ihr Snippet so aus:
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Rechtsangelegenheiten bestellen
Ein wesentlicher Unterschied zwischen der ursprünglichen CSS-Eigenschaft transform und den neuen Attributen ist die Reihenfolge, in der die deklarierten Transformationen angewendet werden.
Bei transform werden die Transformationsfunktionen in der Reihenfolge angewendet, in der sie geschrieben sind – von links (außerhalb) nach rechts (innen).
Bei den einzelnen Transformationsattributen entspricht die Reihenfolge nicht der Reihenfolge, in der sie deklariert werden. Die Reihenfolge ist immer gleich: zuerst translate (außerhalb), dann rotate und dann scale (innen).
Das bedeutet, dass die beiden 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 Zielelemente zuerst von 50% auf der X-Achse verschoben, dann um 30deg gedreht und schließlich um 1.2 skaliert.
Wenn eines der einzelnen Transformationsattribute zusammen mit einem transform-Attribut deklariert wird, werden zuerst die einzelnen Transformationen angewendet (translate, rotate und dann scale) und zuletzt das transform (innerhalb). Weitere Details finden Sie in der Spezifikation, die definiert, wie die Transformationsmatrix berechnet werden soll.
Animationen
Diese Eigenschaften wurden vor allem hinzugefügt, um Animationen zu vereinfachen. Angenommen, Sie möchten ein Element wie folgt animieren:
transform verwenden
Um diese Animation mit transform zu implementieren, müssten Sie für alle definierten Transformationen alle dazwischenliegenden Werte berechnen und diese in jeden Keyframe einfügen. Um beispielsweise eine Rotation bei der 10-%-Marke durchzuführen, müssen auch die Werte für die anderen Transformationen berechnet werden, da das Attribut transform alle benötigt.
Der resultierende CSS-Code sieht 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 Transformationsattribute verwenden
Mit einzelnen Transformationsattributen wird das Schreiben viel einfacher. Anstatt alle Transformationen von Keyframe zu Keyframe zu ziehen, können Sie jede Transformation einzeln ausrichten. Sie müssen auch nicht mehr alle dazwischenliegenden Werte 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 Transformationseigenschaften und mehrere Keyframes verwenden
Um Ihren Code modular zu gestalten, können Sie jede Subanimation in einen eigenen Satz von Keyframes aufteilen.
@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;
}
Durch diese Aufteilung können Sie die einzelnen Keyframes nach Belieben anwenden, weil sich die transform-Eigenschaften, die jetzt zu individuellen Eigenschaften wurden, nicht mehr überschreiben. Darüber hinaus können Sie für jede Transformation einen anderen Zeitpunkt festlegen, ohne alles neu schreiben zu müssen.
Leistung
Animationen mit diesen neuen Eigenschaften sind genauso effizient wie Animationen der vorhandenen transform-Eigenschaft.
Animationen von translate, rotate und scale werden im Compositor auf die gleiche Weise ausgeführt wie Animationen von transform. Sie eignen sich also genau wie transform für die Animationsleistung.
Diese neuen Properties funktionieren auch mit der Property will-change. Im Allgemeinen ist es empfehlenswert, will-change nicht zu sehr zu verwenden, indem Sie es für eine Mindestanzahl von Elementen und für einen möglichst kurzen Zeitraum einsetzen. Aber es ist auch gut, so konkret wie möglich zu sein. Wenn Sie beispielsweise will-change verwenden, um eine Animation mit den Attributen rotate und filter zu optimieren, sollten Sie dies mit will-change: rotate, filter deklarieren. In dem Fall, dass Sie rotate und filter animieren, ist dies etwas besser als die Verwendung von will-change: transform, filter, da einige Datenstrukturen, die Chrome im Voraus erstellt, wenn Sie will-change verwenden, für transform und rotate unterschiedlich sind.
Teil der Videoreihe „Neu interoperable“