Design

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

8. September 2012

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 Senkevitch 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.

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

2 Kommentars

chronologisch
nach der Bewertung zuerst neue chronologisch
1

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

2

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 ...