CSS

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

8. September 2012
von

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)

Neben dem Chemiestudium interessiert sich Swetlana Friedman für sehr viele Dinge dieser Welt. Kunst, Malerei, Psychologie, Naturwissenschaften, Schachspiel, Sprachen und Photographie sind nur einige Beispiele ihrer Interessen und Hobbies. Sie hat eine Leidenschaft fürs Schreiben und Design gefunden und beschäftigt sich nun mit Webdesign.

2 Kommentare zu „Ihre Website in 3D mit Meny und CSS 3D Transforms
  1. gnome2fan am 8. September 2012 um 13:10

    Funzt nicht in Opera 12 (Ubuntu 11.04). In den Browsern des Marktführers vermutlich auch nicht …

  2. Dirk Schmidt am 10. September 2012 um 01:25

    Beeindruckende Effekte, die ansonsten nur mit proprietärer Software, etwa Flash, möglich wären? Wird wirklich mal Zeit, sich mit SVG zu beschäftigen. Das funktioniert dann auch mit (fast) allen Browsern. Sogar, wenn JavaScript ausgeschaltet ist. Und das ist auf Firmenrechnern meistens der Fall …

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!