Einem rotierten Element eine Skalierung verpassen ohne die Rotation kaputt zu machen

[T-Rex]

Hi,

seit einiger Zeit programmiere ich wieder Spiele via html, css und js. Wir arbeiten sehr viel mit transform. Das Problem dabei ist, dass bei transform mehrere Eigenschaften zusammengefasst werden (was wie ich finde ein absolutes Unding ist).

Jetzt haben wir immer wieder das Problem, dass wir eine Eigenschaft via js setzen, dann aber eine css Animation drauf setzten wollen. In meinem konkreten Beispiel wurde das Element fix um 90deg gedreht (transform: rotate(90deg)). Jetzt möchte ich es pulsieren lassen (transform: scale(1.5)). Natürlich innerhalb einer css Animation.

Was passiert ist klar, die Drehung verschwindet.

Ein Workaround ist natürlich zwei ineinander verschachtelte Elemente zu haben. Das eine ist gedreht, das andere bekommt die Skalierung. Da wir aber an HTML Elementen sparen wollen, versuchen wir sowas zu vermeiden.

Eine Animation via Javascript ist natürlich auch möglich. Diese sind jedoch meistens Ressourcen fressender als die css Lösung.

Ideal wäre, wenn man den Wert direkt setzen könnte ohne den anderen zu überschreiben => transform-scale: 1.5. Oder aber, wenn man ein Attribut in css benutzen könnte: transform: scale(1.5) rotate([data-rotate]deg). Dann müsste ich die rotate Information via js nur noch in das Attribut packen.

Gruß T-[data-rex]