Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dr. Web Redaktion
  • 7. Mai 2012
Bookmarke mich
Share on pocket

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

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

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

Agenturpartner

Haurand Webdesign

Aachen

JOHDA Webdesign

Berlin

Evergreen Media

Innsbruck

PromoMasters Online Marketing

Wien

DAZECON – Webdesign und Marketing

Dresden

Alle Agenturpartner

Jobs

Junior Media Manager

München

SEO Manager – Vollzeit

Remote

WordPress Developer – Vollzeit

Remote

Frontend-Entwickler Angular, React

Bonn

Media Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

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.

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

          Antworten

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.