10 atemberaubende 3D-Projekte, die vollständig mit CSS und JavaScript erstellt wurden

Das Internet hat sich weit von Einwahl-Internet- und GeoCities-Seiten entfernt. Websites sind jetzt vollständig reaktionsschnell und von Touchscreen-Geräten aus zugänglich. Aber moderne Browser haben die Dinge noch weiter gebracht als das „Mainstream“-Webdesign.

Es ist möglich, erstaunliche 3D-Effekte im Browser zu erstellen, indem nur Frontend-Technologien verwendet werden. Und in diesem Beitrag stelle ich meine liebsten 3D-Webprojekte vor, die zeigen, wie weit das Web in wenigen Jahrzehnten gekommen ist.

Perspektivenkästen

Ob Sie es glauben oder nicht, diese Box-Animation wurde mit reinen CSS3-Transformationen erstellt. Die eigentlichen Würfel sind ziemlich einfach mit CSS zu rendern und die wechselnden Farben funktionieren mit unterschiedlichen Klassen.

Die Animation verwendet sich wiederholende Keyframe-Animationen, um die Illusion zu vermitteln, dass diese Boxen im 3D-Raum hüpfen. Durch Klicken auf eine der Perspektivschaltflächen in der oberen rechten Ecke können Sie dieses 3D-Modell sogar aus verschiedenen Blickwinkeln betrachten. Ziemlich cool!

Reines CSS3-Diagramm

Ein weiteres Beispiel für eine reine CSS3-Animation ist dieses von Ana Tudor erstellte Balkendiagramm. Es verwendet einen einfachen HTML-Container mit vier inneren Divs, die die vier Seiten jedes Rechtecks ​​darstellen.

Die Balken lassen sich mit CSS3 leicht animieren und wachsen alle auf unterschiedliche Höhen. Aber der beeindruckendste Teil ist, wie diese gesamte Animation die Blickwinkel dreht , selbst wenn das Balkendiagramm wächst.

Dies verwendet viel Sass-Code, um die Animationen mit Berechnungsfunktionen zu automatisieren, also ist es ein bisschen technisch. Aber wenn Sie versuchen, mehr über 3D zu erfahren, dann ist dies ein solider Stift, in den Sie eintauchen können.

Tunnelblick

Werfen Sie für ein abgefahrenes Webkit-Browser-Erlebnis einen Blick auf diesen 3D-Tunnel, der nur mit einigen CSS3-Transformationen und Sass-Eigenschaften erstellt wurde.

Die wechselnden Farben durchlaufen eine Sass-for-Schleife, die nach einer bestimmten Zeit den HSL-Farbwert wechselt. Diese Schleifen vermitteln die Illusion, dass Sie auf unbestimmte Zeit durch einen Tunnel aus bunten Konfettistücken reisen. Ziemlich wild!

Es scheint nichts Besonderes zu sein und es ist definitiv nicht praktikabel für eine große Website. Aber es ist ein Beweis dafür, wie viel Sie mit etwas Kreativität und Programmierkenntnissen erreichen können.

3D-iPhone in CSS

Das iPhone 4 bot ein radikal neues Design und hat alle für das neue Killer-Smartphone gehyped. Entwickler Jonathan Levaillant muss das iPhone 4 wirklich genossen haben, da er das Design in reinem CSS nachgebildet hat.

Wenn es um rotierende Geräte geht, ist das verdammt cool. Es sieht aus wie ein iPhone und das äußere Band reflektiert sogar Licht mit einem realistischen Farbverlauf. Der Bildschirm des iPhones spielt ein mp4-Video ab, das auf Apples Servern gehostet wird, und es verzerrt auch richtig in der Perspektive.

Das Verrückteste daran ist, dass es für alles ausschließlich auf CSS angewiesen ist. Ich werde in weiteren 10 Jahren begeistert sein, wenn reine CSS3-iPhones vollständig interaktiv im Browser sind.

3D-Sonnensystem

Die Milchstraße ist unsere kleine Ecke des Universums und wird in diesem erstaunlichen Stift von Julian Garnier vollständig dargestellt.

Es verwendet viel CSS, aber die meisten anpassbaren Effekte basieren auf JavaScript. Auf diese Weise können Sie die Geschwindigkeit, Größe und Entfernung verschiedener Planeten ändern.

Sie können sogar relativ einfach zwischen der 3D-Ansicht und einer 2D-Ansicht von oben wechseln. Sprechen Sie über eine hervorragende Nutzung der Frontend-Entwicklung!

Schattierte Würfel

Diese einfachen schattierten Würfel scheinen nicht viel zu sein. Sie sind in CSS eingebaut und drehen sich mithilfe von CSS3-Animationen automatisch um eine Achse.

Aber es gibt eine interaktive Einstellung, in der Sie die Würfel beim Bewegen der Maus animieren können. Dies ist definitiv ein cooler Trick und stützt sich auf ein paar seltene CSS-Techniken, darunter die :hover und :checked zusammen mit dem tilde(~) selector .

CSS 3D-Karussell

Bildkarussells eignen sich hervorragend, um Grafiken, Fotos und sogar Videos abwechselnd zu präsentieren. Und mit diesem CSS3-Karussell können Sie diese lustigen Schieberegler auf eine ganz neue Ebene bringen.

Dieses sehr einfache 3D-Karussell basiert auf Klickereignissen, um zwischen verschiedenen Elementen zu animieren. Der 3D-Stil ist überraschend detailliert und basiert ausschließlich auf CSS-Code.

Das einzige JavaScript, das hier benötigt wird, ist, zwischen den Schaltflächen „Weiter“ und „Zurück“ umzuschalten und die 3D-Stile an Ort und Stelle zu animieren. Und das ist tatsächlich etwas, das Sie auf einer echten Website verwenden könnten, sodass es im modernen Webdesign einen praktischen Nutzen haben könnte.

Chill den Löwen

Hier ist etwas, das etwas weniger praktisch ist, aber trotzdem unglaublich viel Spaß macht. Dieser 3D-Löwen-Render von Karim Maaloul verwendet Three.js, um ein lustiges Spiel zu erstellen, bei dem Sie einem verschwitzten Löwen etwas kühle Luft blasen können.

Wenn Sie den Fächer mit dem Cursor über die Seite bewegen, folgt der Blick des Löwen. Klicken Sie dann einfach, um den motorisierten Ventilator zu starten, und beobachten Sie die Aufregung des Löwen, während Sie ihm einen kühlen Luftstrom schicken.

Der Entwickler ging sogar so weit, flatternde Bereiche in der Mähne des Löwen zusammen mit Bewegung in den Schnurrhaaren zu schaffen.

Dies ist ein weiteres detailliertes Beispiel dafür, wie weit 3D-Effekte gekommen sind.

3D-NES-Controller

Klassische Spiele haben ihre Spuren in der aktuellen Generation von Programmierern hinterlassen, und Sie können dies mit Johan van Tongerens 3D-NES-Controller sehen, der in reinem CSS3 gerendert wurde.

Es funktioniert am besten in Chrome/WebKit-Browsern, obwohl es auch in Firefox gut funktionieren sollte. Es ist eher ein Experiment, um zu sehen, wie weit CSS gekommen ist, also erwarten Sie nicht, dass es perfekt ist!

Kepler-Umlaufbahnen

Ich kann mir nicht vorstellen, wie lange es gedauert hat, dieses realistische Modell einer Kepler-Umlaufbahn zu bauen. Dieses Modell zeigt die Bewegung eines Körpers relativ zu einem anderen im Raum, und in diesem Fall hat der Entwickler Danie Clawson unglaubliche Arbeit geleistet.

Dieses gesamte Modell verwendet CSS für Visuals und Three.js für die 3D-Effekte. In der oberen linken Ecke finden Sie ein Optionsfeld, in dem Sie viele der Umlaufbahnvariablen ändern können, um die Geschwindigkeit, Größe und Platzierung des Objekts zu beeinflussen.

Sie werden vielleicht sogar bemerken, dass das umlaufende Objekt realistisches Licht mit Schattierung verwendet, basierend darauf, welche Seite zur Sonne zeigt. Das ist wahnsinnig beeindruckend und gehört aufgrund der immensen Liebe zum Detail auf Platz 1 dieser Liste.

Ich hoffe, diese Beispiele können Sie dazu inspirieren, mehr über die Frontend-Entwicklung zu erfahren und vielleicht sogar Ihre eigenen 3D-Projekte zu erstellen.