|
|||
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. |
Sponsored Links |
|
||||
meinst du das so https://codepen.io/basti1012/pen/XYYvaN
|
Sponsored Links |
|
|||
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! |
Stichwörter |
animation, bild, drehen, drehung, rotate |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
a href und -webkit-transform: rotate in Chrom problematisch! =( | Paykoman | CSS | 14 | 12.11.2013 11:32 |
Animierte Werbebanner designen lassen - Design zu verspielt? | masterbanner | Site- und Layoutcheck | 4 | 03.11.2013 20:48 |
Schiefgestellte Navigation (rotate) | Barodscheff | CSS | 5 | 30.06.2012 16:00 |
CSS Rotate verschachteln? | Catscratch | CSS | 2 | 13.09.2010 11:04 |
Animierte GIF-Datei startverzögert | p0mmeluff | Grafik, Design, Typografie | 1 | 11.12.2009 16:37 |