10 proiecte 3D uimitoare construite în întregime cu CSS și JavaScript

Web-ul a parcurs un drum lung de la Internetul dial-up și paginile GeoCities. Site-urile web sunt acum pe deplin receptive și accesibile de pe dispozitivele cu ecran tactil. Dar browserele moderne au dus lucrurile și mai departe dincolo de designul web „mainstream”.

Este posibil să creați efecte 3D uimitoare în browser utilizând doar tehnologii frontend. Și în această postare, voi prezenta proiectele mele web 3D preferate care arată cât de departe a ajuns webul în câteva decenii scurte.

Casete de Perspectivă

Credeți sau nu, această animație casetă a fost realizată cu transformări CSS3 pure. Cuburile reale sunt destul de ușor de redat folosind CSS, iar culorile alternante funcționează cu clase diferite.

Animația folosește animații de cadre cheie în buclă pentru a da iluzia că aceste cutii sări în spațiul 3D. Făcând clic pe oricare dintre butoanele de perspectivă din colțul din dreapta sus, puteți chiar să vizualizați acest model 3D din unghiuri diferite. Destul de la moda!

Grafic CSS3 pur

Un alt exemplu de animație CSS3 pură este acest grafic cu bare creat de Ana Tudor. Folosește un container HTML simplu cu patru div-uri interioare reprezentând cele patru laturi ale fiecărui dreptunghi.

Barele sunt destul de ușor de animat folosind CSS3 și toate cresc la înălțimi diferite. Dar cea mai impresionantă parte este modul în care întreaga animație rotește unghiurile de vizualizare chiar și în timp ce graficul cu bare crește.

Acest lucru folosește mult cod Sass pentru a automatiza animațiile cu funcții de calcul, așa că este puțin tehnic. Dar dacă încercați să aflați mai multe despre 3D, atunci acesta este un stilou solid în care să vă scufundați.

Tunnel Vision

Pentru o experiență simplă de browser Webkit, aruncați o privire la acest tunel 3D creat doar cu câteva transformări CSS3 și proprietăți Sass.

Culorile alternative trec printr-o buclă Sass for care alternează valoarea culorii HSL după o anumită perioadă de timp. Aceste bucle dau iluzia că călătoriți printr-un tunel de piese de confetti colorate la nesfârșit. Destul de sălbatic!

Poate că nu pare ceva special și cu siguranță nu este practic pentru un site web important. Dar este o dovadă a cât de mult poți face cu ceva creativitate și cunoștințe de codificare.

iPhone 3D în CSS

iPhone 4 a oferit un design radical nou și a făcut ca toată lumea să fie entuziasmată pentru noul smartphone ucigaș. Dezvoltatorul Jonathan Levaillant trebuie să fi plăcut foarte mult iPhone 4, deoarece a recreat designul în CSS pur.

Pe măsură ce dispozitivele rotative merg, acesta este al naibii de cool. Arată ca un iPhone, iar banda exterioară chiar reflectă lumina cu un gradient realist. Ecranul iPhone-ului redă un videoclip mp4 găzduit pe serverele Apple și, de asemenea, se distorsionează corespunzător în perspectivă.

Ceea ce este cel mai nebunesc despre asta este faptul că se bazează exclusiv pe CSS pentru orice. Voi fi emoționat în alți 10 ani când iPhone-urile CSS3 pure vor fi complet interactive în browser.

Sistem solar 3D

Calea Lactee este micul nostru colț de univers și este pe deplin reprezentată în acest stilou uimitor creat de Julian Garnier.

Folosește o mulțime de CSS, dar majoritatea efectelor personalizabile se bazează pe JavaScript. Acest lucru vă permite să schimbați viteza, dimensiunea și distanța diferitelor planete.

Puteți chiar să comutați între vizualizarea 3D și o vizualizare 2D de deasupra capului cu relativă ușurință. Vorbiți despre o utilizare stelară a dezvoltării frontend!

Cuburi umbrite

Aceste cuburi umbrite simple pot să nu pară prea multe. Sunt construite în CSS și se rotesc automat pe o axă folosind animații CSS3.

Dar există o setare interactivă în care puteți anima cuburile la trecerea mouse-ului. Acesta este cu siguranță un truc grozav și se bazează pe câteva tehnici CSS rare, inclusiv pseudo-clasele :hover și :checked împreună cu tilde(~) selector .

Carusel CSS 3D

Caruselurile de imagini sunt excelente pentru a prezenta grafice, fotografii și chiar videoclipuri în rotație. Și cu acest carusel CSS3 puteți duce aceste glisoare distractive la un nivel cu totul nou.

Acest carusel 3D foarte simplu se bazează pe evenimente de clic pentru a anima între diferite elemente. Stilul 3D este surprinzător de detaliat și se bazează exclusiv pe codul CSS.

Singurul JavaScript necesar aici este să comutați între butoanele următor/prev și să animați stilurile 3D la locul lor. Și acesta este de fapt ceva pe care l-ați putea folosi pe un site real, așa că poate avea o utilizare practică în designul web modern.

Chill the Lion

Iată ceva mai puțin practic, dar totuși incredibil de distractiv de folosit. Această redare 3D a leului de Karim Maaloul folosește Three.js pentru a crea un joc distractiv în care poți sufla puțin aer rece pe leul transpirat.

Pe măsură ce deplasați evantaiul în jurul paginii cu cursorul, privirea leului va urma. Apoi doar faceți clic pentru a porni ventilatorul motorizat și urmăriți emoția leului în timp ce îi trimiteți un flux rece de aer.

Dezvoltatorul a mers chiar atât de departe încât a creat zone de clapăt în coama leului, împreună cu mișcarea în mustăți.

Acesta este încă un exemplu detaliat despre cât de departe au ajuns efectele 3D.

Controler 3D NES

Jocurile clasice și-au pus amprenta asupra generației actuale de codificatori și puteți vedea acest lucru cu controlerul NES 3D al lui Johan van Tongeren redat în CSS3 pur.

Funcționează cel mai bine în browserele Chrome/WebKit, deși ar trebui să se redeze bine și în Firefox. Este într-adevăr mai mult un experiment pentru a vedea cât de departe a ajuns CSS, așa că nu vă așteptați să fie perfect!

Orbitele Kepler

Nu îmi pot imagina cât de mult a durat construirea acestui model realist al unei căi de orbită Kepler. Acest model arată mișcarea unui corp față de altul în spațiu, iar în acest caz, dezvoltatorul Danie Clawson a făcut o treabă incredibilă.

Întregul model folosește CSS pentru imagini și Three.js pentru efectele 3D. În colțul din stânga sus veți găsi o casetă de opțiuni în care puteți modifica multe dintre variabilele de orbită pentru a afecta viteza, dimensiunea și plasarea obiectului.

S-ar putea chiar să observați că obiectul care orbitează folosește lumină realistă cu umbrire în funcție de partea îndreptată către soare. Acest lucru este extraordinar de impresionant și aparține numărul 1 pe această listă pentru atenția imensă la detalii.

Sper că aceste exemple vă pot inspira să aflați mai multe despre dezvoltarea frontend și poate chiar să vă creați propriile proiecte 3D.