NEWS
CSS Bild durch Zahl drehen lassen
-
Hallo Leute,
ich habe etwas spezielles vor und brauche mal eure Unterstützung.
Ich möchte gerne einen Tacho grafisch zeichnen und die Tachonadel (ebenfalls ein Bild), in Abhängigkeit einer Zahl, ausschlagen lassen.
Hierzu suche ich ein CSS, dass mir das Bild der Nadel dreht. Idealerweise etwas verlangsamt.
Zwar gibt es einiges in der Vis die mir die Werte anzeigen können, jedoch möchte ich meine eigene Grafik zum Einsatz bringen.
Ich freue mich auf eure Nachrichten.
VG Axel -
Hallo Leute,
ich habe etwas spezielles vor und brauche mal eure Unterstützung.
Ich möchte gerne einen Tacho grafisch zeichnen und die Tachonadel (ebenfalls ein Bild), in Abhängigkeit einer Zahl, ausschlagen lassen.
Hierzu suche ich ein CSS, dass mir das Bild der Nadel dreht. Idealerweise etwas verlangsamt.
Zwar gibt es einiges in der Vis die mir die Werte anzeigen können, jedoch möchte ich meine eigene Grafik zum Einsatz bringen.
Ich freue mich auf eure Nachrichten.
VG Axel -
Hallo Leute,
ich habe etwas spezielles vor und brauche mal eure Unterstützung.
Ich möchte gerne einen Tacho grafisch zeichnen und die Tachonadel (ebenfalls ein Bild), in Abhängigkeit einer Zahl, ausschlagen lassen.
Hierzu suche ich ein CSS, dass mir das Bild der Nadel dreht. Idealerweise etwas verlangsamt.
Zwar gibt es einiges in der Vis die mir die Werte anzeigen können, jedoch möchte ich meine eigene Grafik zum Einsatz bringen.
Ich freue mich auf eure Nachrichten.
VG Axel -
Vielen Dank für eure Hinweise.
Anbei mein aktueller Stand.
Tacho ist mal gezeichnet. In Anlehnung eines Tachos vom BMW M5 ;-)
Will ich aber noch besser machen.
Hier seht ihr die Eintragung bei CSS im Feld transform
rotate({Adapter-LAT.Variabeln.Winkel_Bezug-Produktion}deg)Heißt die Grafik dreht sich anhand einer Variabel.

Funktioniert sehr gut, jedoch ist es halt sehr ruckartig.
Jetzt weiß ich, dass es mit transition wohl auch etwas verlangsamt gehen müsste.
Am liebsten wäre mir die Rotation und transition als CSS in einem zu Verknüpfen, aber das dazu müsste im CSS auch die Möglichkeit einer Variabel möglich sein.Oder kann ich transition auch einzeln eintragen?
Hab schon einige Befehle versucht, die wirken sich aber nicht auf die Nadel aus.
Wäre über jeden Tipp dankbar.
VG Axel
-
Vielen Dank für eure Hinweise.
Anbei mein aktueller Stand.
Tacho ist mal gezeichnet. In Anlehnung eines Tachos vom BMW M5 ;-)
Will ich aber noch besser machen.
Hier seht ihr die Eintragung bei CSS im Feld transform
rotate({Adapter-LAT.Variabeln.Winkel_Bezug-Produktion}deg)Heißt die Grafik dreht sich anhand einer Variabel.

Funktioniert sehr gut, jedoch ist es halt sehr ruckartig.
Jetzt weiß ich, dass es mit transition wohl auch etwas verlangsamt gehen müsste.
Am liebsten wäre mir die Rotation und transition als CSS in einem zu Verknüpfen, aber das dazu müsste im CSS auch die Möglichkeit einer Variabel möglich sein.Oder kann ich transition auch einzeln eintragen?
Hab schon einige Befehle versucht, die wirken sich aber nicht auf die Nadel aus.
Wäre über jeden Tipp dankbar.
VG Axel
material design css von uhula bietet die möglichkeit der rotation.
-
Vielen Dank für eure Hinweise.
Anbei mein aktueller Stand.
Tacho ist mal gezeichnet. In Anlehnung eines Tachos vom BMW M5 ;-)
Will ich aber noch besser machen.
Hier seht ihr die Eintragung bei CSS im Feld transform
rotate({Adapter-LAT.Variabeln.Winkel_Bezug-Produktion}deg)Heißt die Grafik dreht sich anhand einer Variabel.

Funktioniert sehr gut, jedoch ist es halt sehr ruckartig.
Jetzt weiß ich, dass es mit transition wohl auch etwas verlangsamt gehen müsste.
Am liebsten wäre mir die Rotation und transition als CSS in einem zu Verknüpfen, aber das dazu müsste im CSS auch die Möglichkeit einer Variabel möglich sein.Oder kann ich transition auch einzeln eintragen?
Hab schon einige Befehle versucht, die wirken sich aber nicht auf die Nadel aus.
Wäre über jeden Tipp dankbar.
VG Axel
-
@firehero schau mal bei jquery easing
da kannst du die rotation in einer bestimmten zeit weich animieren lassen
https://api.jqueryui.com/easings/