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

Beitrag lesen

@@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

--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner