"transform: rotate" Geht das relativ?

[misterunknown]

Moin,

ich möchte einen Button, der ein Bild immer um 90° (deg) dreht. Allerdings bringt folgende Anweidung:
[präfix]transform: rotate(90deg);
nur einmal einen Effekt. Das bedeutet, das Bild bleibt um 90° gedreht, auch wenn ich mehrmalig klicke. Kann ich in rotate() einen Wert einsetzen, der sich relativ auswirkt? (Prozentangaben gehen nicht)
Oder muss ich das etwas komplexer gestalten und auswerten, welchen Wert die Eigenschaft zum Zeitpunkt des Klickens hat?

Grüße Marco

[Ole]

Hallo Marco,

uns fehlen da vermutlich ein paar Informationen um dir helfen zu können:

• was macht der Klick bzw. wie führt dieser dazu, dass das Bild rotiert?

Gruß

[misterunknown]

Moin,

• was macht der Klick bzw. wie führt dieser dazu, dass das Bild rotiert?

Ja, der Klick rotiert das Bild. Sagen wir ich habe einen Haus mit Satteldach, welches nach oben zeigt, und der Button bewirkt rotate(90deg). Dann zeigt das Satteldach nach rechts, das Bild wird gedreht. Klicke ich wieder auf den Button passiert nichts, das Dach zeigt nach wie vor nach rechts.

Mein Bestreben ist es aber, durch mehrmaliges Klicken eine fortwährende Rotation um 90° zu bekommen

Grüße Marco

[dave]

Hi,

du kannst immer ein rotate(90deg) hinzufügen bzw. entfernen.

Nach 1. Klick: transform: rotate(90deg);
Nach 2. Klick: transform: rotate(90deg) rotate(90deg);
Nach 3. Klick: transform: rotate(90deg) rotate(90deg) rotate(90deg);
…

~dave

[misterunknown]

Moin,

du kannst immer ein rotate(90deg) hinzufügen bzw. entfernen.

Das wusste ich noch nicht. Das werd ich jetzt erstmal so machen, danke :)

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

du kannst immer ein rotate(90deg) hinzufügen bzw. entfernen.

Wozu? Wenn der Wert der transform-Eigentschaft geändert wird, kann man auch gleich den Parameter von rotate() ändern.

Das wusste ich noch nicht. Das werd ich jetzt erstmal so machen, danke :)

Warum sollte der Browser zwei Transformationen durchführen? Weil du nicht 90 + 90 rechnen kannst?

Qapla'

[dave]

Hi,

du kannst immer ein rotate(90deg) hinzufügen bzw. entfernen.

Wozu? Wenn der Wert der transform-Eigentschaft geändert wird, kann man auch gleich den Parameter von rotate() ändern.

Dann muss man sich entweder in einer Variable merken wo man gerade ist, oder den aktuellen Wert auslesen.
Beides aufwändiger als einfach " rotate(90deg)" dran zu hängen.

Das wusste ich noch nicht. Das werd ich jetzt erstmal so machen, danke :)

Warum sollte der Browser zwei Transformationen durchführen? Weil du nicht 90 + 90 rechnen kannst?

Warum sollte ich 90 + 90 rechnen wenn das der Browser machen kann?
Glaubst du der geht zur Gewerkschaft und beschwert sich?

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Beides aufwändiger […]

Fürs Script nur geringfügig.

[…] als einfach " rotate(90deg)" dran zu hängen.

Das ist für den Browser aufwändiger.

Warum sollte ich 90 + 90 rechnen wenn das der Browser machen kann?

Das tut er nicht. Er führt zwei Rotationen nacheinander durch. Das heißt, zu jeder die Transformationsmatrix berechnen und beide miteinander multiplizieren.

Qapla'

[dave]

Hi,

erwartest du echt Probleme mit der Performance wenn man rotate(90deg) mehrmals hintereinander verwendet?
Ich würde eigentlich sogar erwarten dass das wegoptimiert wird.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

erwartest du echt Probleme mit der Performance wenn man rotate(90deg) mehrmals hintereinander verwendet?

Ja, denn die Rechnung ist nicht pille-palle.

Ich würde eigentlich sogar erwarten dass das wegoptimiert wird.

Probiers doch mal aus;-)

Für n > 3 sollte man bestimmt Performanceunterschiede sehen.

Matthias

[dave]

Hi,

erwartest du echt Probleme mit der Performance wenn man rotate(90deg) mehrmals hintereinander verwendet?

Ja, denn die Rechnung ist nicht pille-palle.

Nicht? Was davon nicht? Sinus und Kosinus von Pi/2 auszurechnen, oder mit 1 oder 0 multiplizieren?
Mehr ist das doch nicht, oder?

Für n > 3 sollte man bestimmt Performanceunterschiede sehen.

Ich kann bei mir auch nach dem ~50sten Klick keine Verlangsamung von irgendetwas feststellen. Irgendjemand?
Nur in Firefox und Chrome getestet, nur aufm Desktop PC getestet.

~dave

[Alex]

Hi!

Ich kann bei mir auch nach dem ~50sten Klick keine Verlangsamung von irgendetwas feststellen. Irgendjemand?
Nur in Firefox und Chrome getestet, nur aufm Desktop PC getestet.

Meine Erwartungshaltung ist, dass der Browser aus allen Angaben zuerst eine Transformationsmatrix berechnet (Aufwand wächst mit mehr Angaben, geht aber trotzdem sehr schnell) und dann erst die genau eine Transformation durchführt (der rechenintensivere Teil, aber konstanter Aufwand da immer nur eine Matrix).

Ich kann mir vorstellen, dass diese Optimierung nicht greift, wenn man die Transformationen in verschiedenen Regeln hat, also sowas:
.a { transform:rotate(90deg); }
.b { transform:rotate(90deg); }
.c { transform:rotate(90deg); }
.d { transform:rotate(90deg); }

<p class="a b c d">...</p>

Aber auch das ist vermutlich noch pfeilschnell. Spiele mit anspruchsvoller Grafik machen sowas am laufenden Band, und die Browser gehen ja inzwischen auch direkt auf die Grafikkarte.

Viele Grüße,
Alexander

[Matthias Apsel]

transform: rotate(90deg) rotate(90deg) != transform: rotate(90deg); transform: rotate(90deg);

komplizierter wird es sicher bei echten Bildern im Gegensatz zu einfarbig und bei "krummen" Winkeln.

Matthias

[dave]

Hi,

komplizierter wird es sicher bei echten Bildern im Gegensatz zu einfarbig und bei "krummen" Winkeln.

Ich habe auch da keine Performanceprobleme feststellen können.

Ich will gar nicht bestreiten dass das eventuell mehr Rechenleistung benötigen kann. Ich bin nur, bis mich jemand vom Gegenteil überzeugt, der Meinung, dass das in der Praxis komplett egal ist.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Ich will gar nicht bestreiten dass das eventuell mehr Rechenleistung benötigen kann. Ich bin nur, bis mich jemand vom Gegenteil überzeugt, der Meinung, dass das in der Praxis komplett egal ist.

Mehr Rechenoperationen heißt mehr Rechenzeit. Möglich, dass der Zeitunterschied auf heutigen Maschinen nur einen Wimpernschlag ausmacht.

Mehr Rechenoperationen heißt aber auch mehr Stromverbrauch. Bei am Stromnetz hängenden Geräten mag dem Nutzer das egal sein (bei Millionen von Rechnern ist das enorme Energieverschwendung), bei mobilen Geräten heißt das kürzere Akkulaufzeit.

Auch wenn man denkt, über unendliche Ressourcen zu verfügen, muss man diese nicht sinnlos vergeuden.

Qapla'

[Alex]

Hi!

transform: rotate(90deg) rotate(90deg) != transform: rotate(90deg); transform: rotate(90deg);

Hast recht, die überschreiben sich ja.

komplizierter wird es sicher bei echten Bildern im Gegensatz zu einfarbig und bei "krummen" Winkeln.

Nur wenn in den einfachen Fällen spezielle Optimierungen durchgeführt werden. Wenn der Browser nur die Matrix berechnet und sie stur auf alle Pixel anwendet, macht es keinen Unterschied.
Größere Elemente, evtl. mit Kindelementen, könnten aber auch noch einen spürbaren Unterschied machen, einfach weil es dann mehr Pixel zu transformieren gibt.

Viele Grüße,
Alexander

[Matthias Apsel]

Om nah hoo pez nyeetz, Alex!

Nur wenn in den einfachen Fällen spezielle Optimierungen durchgeführt werden.

Da die Rotationsmatrix so aussieht

[latex]R_\alpha = \begin{pmatrix} \cos\alpha & -\sin\alpha \ \sin\alpha & \cos\alpha\end{pmatrix}[/latex]

ergeben sich für Vielfache von 90° besonders einfache Werte, die sicher auch nicht über irgendwelche Reihen ermittelt werden.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

ergeben sich für Vielfache von 90° besonders einfache Werte, die sicher auch nicht über irgendwelche Reihen ermittelt werden.

Nicht? Du meinst, dass spezielle Argumente vorher abgefangen werden?

Bedenke, dass dies nicht 30, 45, 60, 90 usw. wären, sondern 0.523598775598299, 0.785398163397448, 1.047197551196598, 1,570796326794897 usw. Die müssten in genau der vorgesehen Genauigkeit reinkommen …

Qapla'

[Der Martin]

Hallo,

ergeben sich für Vielfache von 90° besonders einfache Werte, die sicher auch nicht über irgendwelche Reihen ermittelt werden.
Nicht? Du meinst, dass spezielle Argumente vorher abgefangen werden?

möglicherweise. Ich habe "vor Urzeiten" mal die Runtimes von Borland Pascal 7.0 und Borland C++ 3.x im Quellcode gehabt, und die haben AFAIR tatsächlich besonders markante Werte rausgepickt und extra behandelt.
Auf der anderen Seite: Sowas ergibt nur einen Sinn, wenn man die Fließkommaarithmetik "in Software" ohne FPU machen muss. Das ist heutzutage zumindest auf den im Desktop-Bereich üblichen Plattformen kein Thema mehr. Wie sieht's bei den mobilen Geräten aus? Haben deren Prozessoren nicht auch schon FPUs integriert?

Bedenke, dass dies nicht 30, 45, 60, 90 usw. wären, sondern 0.523598775598299, 0.785398163397448, 1.047197551196598, 1,570796326794897 usw. Die müssten in genau der vorgesehen Genauigkeit reinkommen …

Stimmt. Aber wenn trigonometrische oder transzendente Funktionen über eine Reihenentwicklung berechnet werden, hat man ohnehin nur eine endliche Genauigkeit. Ich würde mich nicht drauf verlassen wollen, dass die letzten ein oder zwei Mantissen-Bits von Sinus oder Logarithmus noch korrekt sind.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

ergeben sich für Vielfache von 90° besonders einfache Werte, die sicher auch nicht über irgendwelche Reihen ermittelt werden.

Nicht? Du meinst, dass spezielle Argumente vorher abgefangen werden?

Ich denke schon. Nicht viele zwar, aber 0, π/2 und π bestimmt. Und alles andere geht über das Ausnutzen von Quadrantenbeziehungen und Periodizität. Sinus und Kosinus wahrscheinlich über eine Reihe, ich würde die Kosinusreihe nehmen.

Warum sollte man solche Vorteile nicht nutzen? „Auch wenn man denkt, über unendliche Ressourcen zu verfügen, muss man diese nicht sinnlos vergeuden.“ (Gunnar Bittersmann)

Matthias