Ihre Website in 3D mit Meny und CSS 3D Transforms

CSS 3d Transforms sind häufiger Thema bei Dr. Web. Diese Technik erlaubt komplexe, dabei beeindruckende Effekte, die ansonsten nur mit proprietärer Software, etwa Flash, möglich wären. Heute präsentieren wir Ihnen mit dem CSS3-Experiment Meny eine weitere Möglichkeit der Anwendung von CSS 3D Transforms.

3D-Meny: die Startseite

Was ist Meny?

Meny ist ein Experiment. Es demonstriert, wie CSS3 3D-Transforms auch zur Erstellung eines Navigationsmenüs eingesetzt werden können. Das Schöne an Mey ist, dass Sie es nicht erst umständlich implementieren müssen, vielmehr reicht es, diesem Link „lab.hakim.se/meny/?http://“ beispielsweise „drweb.de/magazin“ hinzuzufügen. Der Link wird dann folgendermaßen ausschauen: http://lab.hakim.se/meny/?http://drweb.de/magazin. Klicken Sie mal und bewegen die Maus an den linken Browserrand…

Ein spezieller Falteffekt an der linken Seite wird sichtbar, wenn man den Parameter #fold hinzufügt. Also so: http://lab.hakim.se/meny/?http://drweb.de/magazin#fold

Wie das Ergebnis dann aussehen soll, zeige ich Ihnen an Beispielen einiger meiner Lieblingswebseiten:

Beispiel 1: Smashingmagazine

Beispiel 2: Spiegel

Beispiel 3: DrWeb

Beispiel 4: Planet-Wissen

Hier werden die CSS3-Transforms zur Rotation verwendet. JavaScript reagiert dabei auf die Bewegung des Mauszeigers.

Nicht auf alle Webseiten und nicht in allen Browsern lassen sich diese Transformationen anwenden. Fraglich auch, ob sich 3D-Bedienung je wird durchsetzen können. Auch in der echten Welt sind Elemente, die Aktionen veranlassen sollen, etwa Fernbedienungen, Stromschalter, Zündschlösser etc.  herkömmlicherweise nur an der Front zu bedienen. Kreativ ist es in jedem Falle…

(dpe)