XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Animierte Bilddrehung mit Rotate (http://xhtmlforum.de/showthread.php?t=73523)

Sunlion 24.06.2018 17:00

Animierte Bilddrehung mit Rotate
 
Ich möchte auf einer Musiker-Website Drehknöpfe (wie Lautstärkeregler) für die Navigation benutzen. Mittels transition: ease ist es mir bereits gelungen, die Knöpfe zu animieren, sobald eine Mausaktion erfolgt.
Nun möchte ich aber noch erreichen, dass nach erfolgtem Klick und dem Aufruf der neuen Seite ein bestimmter Knopf sich von selbst dreht (ohne Mausaktion), und zwar mit einem Start- und einem Endpunkt. Leider finde ich dazu nichts Passendes bei Google, vielleicht fehlen mir die richtigen Suchbegriffe.
Probiert habe ich Folgendes:

transition: all 0.2s ease; transform: rotate(150deg, 295deg)

Die Gradangaben in Klammern habe ich bei Background-Verläufen abgeschaut, dort werden verschiedene Werte einfach durch Komma abgetrennt. Hier funktioniert das aber leider nicht.
Kann mir jemand sagen, wie die korrekte Syntax lauten muss?
Das Bild soll mit 150 Grad Drehung starten und sich sanft bis 295 Grad drehen.

basti1012 24.06.2018 21:23

meinst du das so https://codepen.io/basti1012/pen/XYYvaN

Sunlion 24.06.2018 21:42

Ja, exakt, nur ohne den Knopf. Aber die Essenz habe ich extrahiert, und sie funktioniert nun genau so, wie gewünscht.
Aha, man muss die Werte also in zwei verschiedene geschweifte Klammern packen. Interessant, das hab ich so auch noch nicht gesehen. Ich werde bei nächster Gelegenheit mal danach googeln und mir die Infos anlesen.
Erst mal vielen Dank, hast mir sehr geholfen! :thumbsup:


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:31 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023