Drehen entlang der Z - Achse in HTML5 - Flip-Karte

Ich kam gerade über eine einfache flash-animation auf flip-Karte
Die Spielkarte Effekt
Die Karte hat 2 Bilder "vor" Bild und "zurück" - Bild
beim anklicken der Karte schaltet sich mit drehen entlang der Z-Achse
zeigt die Vorder-und die Rückseite entsprechend.

Kann die gleiche Wirkung erzielt werden, die mithilfe von HTML5 /Canvas /CSS3 ??

PS: ich bin totaler newbie/noob wenn es um HTML5 und CSS3 Zeug.

Danke an alle

Siehe hier: stackoverflow.com/questions/4613515/page-flip-effect-for-html5

InformationsquelleAutor Amitd | 2010-08-13

  1. 1

    Es ist möglich, mit CSS3 mit Javascript

    Wenn die rotation macht es so dass die Karte zeigt auf der Rückseite, schalten Sie die Grafik auf der "Rückseite" Grafik. Ansonsten, das Bild src an der Vorderseite Grafik.

    Sie können auch die skew mit dem html5-canvas-Kontext mit setTransform. Oder Sie könnte die langsame route und manipulieren Sie pixel-Daten manuell ein.

    der link funktionierte für mich auf Safari . können Sie den code und Mathematik beteiligt, die in der Flash-animation link flashandmath.com/advanced/card wiederverwendet werden, für die Zeichnung auf die Leinwand?
    Diese Seite oben ist blockiert für eine Bedrohung der Sicherheit. GENIAL!
    Mein post war etwa vor 7 Monaten. Die website relevant war zu der Zeit der Buchung. Ich kann natürlich nicht garantieren, die website wird sicher bleiben/relevant ist, da bin ich nicht Ihrer webmaster. .... Egal, die website scheint in Ordnung für mich!

    InformationsquelleAutor Warty

  2. 0

    Dies ist keine Antwort, aber ich sah, was ich glaube, Sie reden über die Implementierung erfolgt nach dem Absenden des Formulars zu sehen hier: http://sublimevideo.net/

    Viele Ihre CSS-und JS ist verschleiert, aber von was ich habe Lesen können, es sieht aus wie Sie verwenden webkit-Transformationen über eine JS-Klasse wechseln. Es ist sehr flüssig und wirklich überrascht mich, wie umwerfend Sie aussah. Hoffentlich einige der Quelle kann Ihnen helfen.

    InformationsquelleAutor Andrew

Schreibe einen Kommentar