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]

[JürgenB]

Hallo,

Schnellschuss:

CSS Custom Properties

Gruß
Jürgen

[Rolf B]

Hallo T-Rex,

Jürgens Hinweis auf custom properties dürfte hilfreich sein. Beachte nur, dass Du dann die Einheit mit in das custom property packen musst.

<div style="animation: pulse 1s; --drehung: 90deg"></div>

@keyframes pulse {
   0% { transform: scale(1) rotate(var(--drehung)); }
  50% { transform: scale(1.5) rotate(var(--drehung)); }
 100% { transform: scale(1) rotate(var(--drehung)); }
}

sollte möglich sein, ich kann es nur zur Zeit nicht ausprobieren.

Falls Du den Wert eines custom property animieren willst, geht das zur Zeit nur in Chrome, dafür brauchst Du Variablendeklarationen die Teil des Houdini-Projekts sind. Siehe dazu meinen letzten Blogbeitrag.

Rolf

[Gunnar Bittersmann]

@@T-Rex

Ideal wäre, wenn man den Wert direkt setzen könnte ohne den anderen zu überschreiben => transform-scale: 1.5.

Kann man. Ohne transform-: translate, scale und rotate gibt es als CSS-Eigenschaften. Das Beispiel 1 läuft in Firefox und Safari. In Chromia (Chrome, Edge) ist das immer noch hinter einem Feature-Flag versteckt. Weiß der Geier, warum die das so ewig hinauszögern.

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.

Wie schon gesagt: custom property. Allederdings springen Chromia da nur zwischen den Randwerten hin- und her, ohne flüssige Animation: Beispiel 2. Muss man da wirklich Houdini für bemühen?

Was natürlich geht – und das browserübergreifend: die komplette Transformation in die Keyframes packen wie im Beispiel 3.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wie schon gesagt: custom property. Allederdings springen Chromia da nur zwischen den Randwerten hin- und her, ohne flüssige Animation: Beispiel 2. Muss man da wirklich Houdini für bemühen?

Look Ma, no JavaScript! Die Deklaration von @property --scale reicht: Beispiel 2a

Was natürlich geht – und das browserübergreifend: die komplette Transformation in die Keyframes packen wie im Beispiel 3.

Die Wiederholung ist natürlich unschön. Aber wo wir die Animation für Chromia gefixt haben, kann man ja alles in einen Topf werfen und hat das Ganze browserübergreifend wie in Beispiel 4.

😷 LLAP

[T-Rex]

Also ich bin baff ...

Das mit den css Variablen ist mir bekannt und ich verwende sie auch schon zahlreich. Dass man diese von außen befüllen kann vergesse ich immer.

Also ich möchte euch allen danken! Ihr habt mir nicht nur geholfen, sondern auch meinen Horizont erweitert. Danke !

Gruß T - - - - - - - - - - - - - - Rexxxxxxxxxxxxxxxx

[Rolf B]

Hallo Gunnar,

ja, das schrub ich neulich. Mittlerweile auch im Fuchs oder Safari? Oder immer noch nur mit Chrome-Leiste?

@property ist sozusagen deklaratives Houdini 😀

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Beispiel 4.

Da hatte ich doch glatt den Selektor im @supports-Block vergessen. Jetzt berichtigt.

😷 LLAP