Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » Spaß mit CSS Transforms: 3D it!, 3D Fishbirds und Wonder Webkit

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dr. Web Redaktion
  • 7. Mai 2012

Inhaltsverzeichnis

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.

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

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.

image4 Spaß mit CSS Transforms: 3D it!, 3D Fishbirds und Wonder Webkit
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 Spaß mit CSS Transforms: 3D it!, 3D Fishbirds und Wonder Webkit
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!

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

Weitere Quellen rund um CSS3-3D-Transforms

  • Tilt: DOM jeder Webseite in 3D-Darstellung
  • Zick-Zack-Form durch CSS3: Ein Tutorial
  • Beercamp: Ein Experiment mit CSS 3D
  • CSS 3D Balkengraphik
Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

WebOptimizer Logo mit der Aufschrift: Die deutsche Agentur in Österreich.

WebOptimizer

Villach

WordPress Agentur Kreativdenker

Speyer

iPower, trigger your leads. Logo der SEO Agentur für Berlin.

iPower AG

Berlin

Logo der Webdesign-Agentur Wolpers Web aus Düsseldorf.

wolpersweb.de Webdesign & SEO

Düsseldorf

pictibe Media Consulting & Solution in Köln.

pictibe – Werbeagentur & Marketingagentur

Bergisch Gladbach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „Spaß mit CSS Transforms: 3D it!, 3D Fishbirds und Wonder Webkit“
— was ist Deine Meinung?

  1. Peter Müller sagt:
    8. Mai 2012 um 9:37 Uhr

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

    Antworten
    1. Dieter Petereit sagt:
      8. Mai 2012 um 10:03 Uhr

      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…

      Antworten
      1. Peter Müller sagt:
        10. Mai 2012 um 9:44 Uhr

        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.

      2. Dieter Petereit sagt:
        10. Mai 2012 um 10:16 Uhr

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

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑