CSS3 Programmierung

    Hallo,
    ich habe ein Problem mit der Darstellung von drehendem Text mittels CSS3 Programmierung.
    Folgender Code funktioniert nur im IE:

    #Meine_Links
    {
    font-size:120%;
    line-height:130%;
    z-index=92;
    animation: Text_drehen 700s forwards;
    -moz-animation: Text_drehen 700s forwards;
    -webkit-animation: Text_drehen 700s forwards;
    }

    @-moz-keyframes Text_drehen
    {
    100%
    {
    -moz-transform:rotateY(36000deg);

    }
    }

    Für die Lösung des Problems bedanke ich mich schon mal im Voraus !

    Hallo,

    Bitte liefere auch das dazugehörige HTML, weil CSS ohne HTML nutzlos ist und man deinen Code so nicht testen kann. Schreibe bitte beides innerhalb solcher Code-Tags, damit es übersichtlich bleibt und vor allem Einrückungen erhalten bleiben, ansonsten ist der Code nur schwer nachzuvollziehen:

    Code
    [code]Dein Code...

    [/code]

    Bitte liefere das nach, damit dir richtig geholfen werden kann.

    PS: Mit Programmierung hat CSS überhaupt nichts zu tun. ;)

    Hier nochmal der vollständige CSS und HTML Code:

    Einmal editiert, zuletzt von Maverick76 (8. April 2013 um 21:59)

    Boersenfeger: du validierst falsch, entweder hast du den falschen Prüfer genommen (für XHTML) oder du hast zuviel vom Code kopiert. Grundsätzliuch gibt es aber schon einige Auffälligkeiten (eine id darf z.B. nur einmal vorkommen - die Links sollten also eher eine Klasse bekommen).

    zum Thema: Ich mag jetzt nicht weiter probieren, aber vielleicht hilft es schon, den moz-Präfix bei animation zu entfernen. Die Dinger werden nach und nach nicht mehr benötigt und dann auch nicht mehr berücksichtigt. Als Erstes würde ich aber tatsächlich den HTML-Code überrabeiten (s. Klasse anstelle der id bei den Links, css dann auch entsprechend anpassen).

    Einen Text im Firefox mit "transform:rotate" zu drehen geht normalerweise.
    Nur in Kombination mit dem "href" geht das nicht !
    Vielleicht gibt es einen anderen Weg, als meinen, den Text im "href" trotzdem
    zum drehen zu bringen.
    Denn im IE läuft es !

    Du kannst transform mehr oder weniger nur auf Elemente mit Block-, nicht mit Inline-Eigenschaft anwenden, genauer in der Spezifikation nachzulesen. Gib dem Element ein display: block oder ein display: inline-block mit und dann funktioniert das auch. Das -moz- lässt du weg, weil das seit Firefox 16 nicht mehr dahingehört, das betrifft sowohl transform als auch animation und @keyframes. Und wie auch schon gesagt wurde: IDs dürfen nur einmal verwendet werden, mehrere Elemente gleich ansprechen tust du mit Klassen.

    Wenn etwas im IE läuft, sagt das in der Regel übrigens überhaupt nichts aus, Firefox und Chrome sind da die wesentlich bessere Referenz, sieht man ja hier wieder.... ;)