Mauszeiger über das Bild bewegen.(funktioniert nicht im IE)
Ein “Wackelbild” nur Mithilfe von CSS erzeugt – einfach nur Cool.
Ich gebe zu das die neuen CSS 3D Effekte auf den wenigsten Webseiten sinnvoll eingesetzt werden können. – Aber sie machen einfach was her.
Das HTML Markup für diese Animation ist ganz einfach. Wir benötigen eine Ebene für die Blätter im Hintergrund und eine für den Vogel. Beiden Ebenen werden per CSS die entsprechenden Bilder als Hintergrundbilder eingebaut (Das einfügen der Bilder mit dem img-Tag funktioniert ebenfalls) Das Vogel Bild ist eine png-Datei mit transparentem Hintergrund.
Diese beiden Ebenen werden von einer “Leinwand-Box” umschlossen.
Die beiden Bilder werden übereinander positioniert. Die Blätter mit “translateZ(-30px)” hinter und der Vogel mit “translateZ(30px)” vor die Leinwand positioniert. Beide Bilder drehen wir noch um 5 Grad um die gemeinsame Y Achse.
Damit das ganze den gewünschten 3D-Effekt bekommt benötigt man eine Perspektive die wir der Leinwand mit “perspective: 500px;” zuweisen.
Befindet sich der Mauszeiger über der Leinwand-Box, wird beiden Bildern die mit der Pseudoklasse :hover definierte neue Position zugewiesen. Beide Bilder drehen sich um 10 Grad um die Y-Achse.
Um den 3D-Effekt noch zu verstärken wird das Vogelbild noch um 20px parallel zur Leinwandebene verschoben.
Damit die Bewegung nicht schlagartig erfolgt wird mit “transition: all 2s ease;” ein sanfter Übergang von 2 Sekunden Dauer erzeugt.