Spaß mit CSS Transforms: 3D it!, 3D Fishbirds und Wonder Webkit

Mit CSS3 lassen sich heute ansprechende, interessante Webseiten variantenreicher und lebendiger als je zuvor erstellen. Zahlreiche CSS-Features, mit deren Hilfe sich Animationen, Übergänge, Schatten und weitere Effekte gestalten lassen, gewinnen mehr und mehr an Bedeutung. CSS3-3D-Transforms sind eine Erweiterung, welche Webdesignern bemerkenswerte Möglichkeiten, ihre Layouts um die dritte Dimension zu erweitern, anbietet. In Kombination mit HTML und JavaScript lassen sich unzählige interessante Effekte erzielen.

3D it!- Beliebige Website im 3D-Look

Was halten Sie davon, eine Webseite in 3D zu verwenden? Edan Kwan, Flash-Entwickler bei Firstborn Multimedia, bietet diese Möglichkeit mit seinem Projekt 3D it! an. Edan Kwan veröffentlichte ein JavaScript-Bookmarklet, welches jeder Website einen 3D-Look verpasst. Das Bookmarklet wird schlicht in die Lesezeichen-Leiste gelegt und mittels Klick aufgerufen, während man sich auf der zu dreidimensionalisierenden Seite befindet. Zusätzlich lassen sich einige Parameter ändern, was den 3D-Look modifiziert. 3D it! ist keine Zauberei, sondern ein geschicktes Zusammenspiel von HTML und CSS3-3D-Transforms. Mittels 3D-Transforms werden die <div>-Elemente sowohl in der Fläche (x, y, top, right, bottom) als auch in der Tiefe verzerrt, was den gewünschten 3D-Effekt mit sich bringt. Das Skript funktioniert in Firefox, Chrome und Safari.


Mailchimp-Startseite in 3D-Ansicht

3D FishBirds: Kreative Umsetzung von CSS3-3D-Transforms

Jonah Goldstein hatte die Idee, einen Rubik’s Cube zu erschaffen, auf dessen Seitenflächen verschiedene Tiere gezeichnet sind. Beim Drehen werden die Flächen kombiniert und dabei entstehen „FischVögel“ (FishBirds), „KuhAffen“ und weitere ungewöhnliche Kreaturen einer Fantasiewelt. Wie auch Edan Kwan experimentierte Jonah mit CSS3-3D-Transforms und zeigt uns nun sein Ergebnis. Mittels der Pfeiltasten des Keyboard lassen sich die Seitenflächen des Cube drehen.


FishBirds: Nicht alltägliche Anwendung von CSS3-3D-Transforms

Wonder Webkit: Die 3D-Matrix

Diese wunderschöne Demo einer 3D-Matrix der Gruppe is-real ist ein weiteres Beispiel für die kreative Anwendung von CSS3 3D-Transforms. Bei der Entwicklung des Wonder Webkit wurde eine JavaScript-Matrix Bibliothek verwendet, um eine Matrix aus Buchcovern zu kreieren. CSS3-3D-Transforms bringen die Matrix in Bewegung und sorgen für den 3D-Effekt. Die Demo wird von Safari, iOS, Chrome, Firefox Nightly und dem kommenden Internet Explorer 10 unterstützt. Viel Spass damit!


Wonder Webkit: Ein Auschnitt

Weitere Quellen rund um CSS3-3D-Transforms

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Peter Müller
Gast
Peter Müller
4 Jahre 23 Tage her

Ziemlich weit hergeholt. Keines der Beispiele funktioniert ohne JavaScript, die meisten noch nicht einmal im Opera und keines auf meinem Android-Smartphone.

Dieter Petereit
Gast
4 Jahre 23 Tage her

Das ist richtig, wurde von der Autorin des Beitrags aber auch so angegeben, respektive nicht angegeben. Wir sind uns doch im Übrigen hoffentlich darüber einig, dass es sich eher um nicht für den ernsthaften Einsatzzweck geeignete Spielereien handelt…

Peter Müller
Gast
Peter Müller
4 Jahre 21 Tage her

Nicht für den ernsthaften Einsatzzweck geeignete Spielereien? dr.web war für mich bisher immer Informationsquelle für [b]ernsthafte[/b] Einsatzzwecke – mit „Spielereien“ kann ich meinen Lebensunterhalt nicht finanzieren.

Dieter Petereit
Gast
4 Jahre 21 Tage her

Vielleicht wäre der Begriff „experimentelle Einsatzzwecke“ treffender, wenn Sie sich unbedingt an der Formulierung stoßen wollen.

trackback

[…] Website in 3D mit Meny und CSS 3D Transforms 8. September 2012von Swetlana Senkevitch CSS 3d Transforms sind häufiger Thema bei Dr. Web. Diese Technik erlaubt komplexe, dabei beeindruckende Effekte, […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen