10 wspaniałych projektów 3D zbudowanych w całości za pomocą CSS i JavaScript

Sieć przeszła długą drogę od stron dial-up i GeoCities. Strony internetowe są teraz w pełni responsywne i dostępne z urządzeń z ekranem dotykowym. Ale nowoczesne przeglądarki wyszły jeszcze dalej poza „główny nurt” projektowania stron internetowych.

Możliwe jest tworzenie niesamowitych efektów 3D w przeglądarce przy użyciu wyłącznie technologii frontendowych. W tym poście zaprezentuję moje ulubione projekty internetowe 3D, które pokazują, jak daleko zaszedł internet w ciągu kilku krótkich dekad.

Pudełka z perspektywą

Wierzcie lub nie, ta animacja pudełka została stworzona za pomocą czystych transformacji CSS3. Rzeczywiste kostki są dość łatwe do renderowania za pomocą CSS, a zmienne kolory działają z różnymi klasami.

Animacja wykorzystuje zapętlone animacje klatek kluczowych, aby stworzyć iluzję tych pudełek podskakujących w przestrzeni 3D. Klikając dowolny przycisk perspektywy w prawym górnym rogu, możesz nawet oglądać ten model 3D pod różnymi kątami. Całkiem fajne!

Czysty wykres CSS3

Jeszcze jednym przykładem czystej animacji CSS3 jest wykres słupkowy stworzony przez Anę Tudor. Używa prostego kontenera HTML z czterema wewnętrznymi elementami div reprezentującymi cztery boki każdego prostokąta.

Słupki są dość łatwe do animowania za pomocą CSS3 i wszystkie rosną do różnych wysokości. Ale najbardziej imponujące jest to, jak cała animacja zmienia kąty widzenia , nawet gdy wykres słupkowy rośnie.

Wykorzystuje to dużo kodu Sass do automatyzacji animacji za pomocą funkcji obliczeniowych, więc jest to trochę techniczne. Ale jeśli chcesz dowiedzieć się więcej o 3D, to jest to solidne pióro, w którym możesz się zanurzyć.

Wizja tunelu

Aby uzyskać niesamowite wrażenia z przeglądarki Webkit, spójrz na ten tunel 3D utworzony za pomocą tylko niektórych przekształceń CSS3 i właściwości Sass.

Naprzemienne kolory przebiegają przez pętlę Sass for, która zmienia wartość koloru HSL po pewnym czasie. Ta pętla daje złudzenie, że podróżujesz przez tunel z kolorowych kawałków konfetti w nieskończoność. Całkiem dziki!

To może nie wydawać się niczym szczególnym i zdecydowanie nie jest praktyczne w przypadku dużej witryny internetowej. Ale jest to świadectwo tego, jak wiele możesz zrobić z odrobiną kreatywności i wiedzy o kodowaniu.

3D iPhone w CSS

IPhone 4 oferował radykalnie nowy wygląd i wzbudził entuzjazm dla zabójczego nowego smartfona. Deweloper Jonathan Levaillant musiał naprawdę lubić iPhone'a 4, odkąd odtworzył projekt w czystym CSS.

Jak na obracające się urządzenia, ten jest cholernie fajny. Wygląda jak iPhone, a zewnętrzny pasek nawet odbija światło z realistycznym gradientem. Ekran iPhone'a odtwarza wideo mp4 hostowane na serwerach Apple, a także prawidłowo zniekształca perspektywę.

Najbardziej szalone w tym jest to, że polega wyłącznie na CSS we wszystkim. Będę podekscytowany za kolejne 10 lat, kiedy iPhone'y z czystym CSS3 będą w pełni interaktywne w przeglądarce.

Układ Słoneczny 3D

Droga Mleczna jest naszym małym zakątkiem wszechświata i jest w pełni reprezentowana w tym niesamowitym długopisie stworzonym przez Juliana Garniera.

Używa dużo CSS, ale większość dostosowywalnych efektów opiera się na JavaScript. Pozwala to zmienić prędkość, rozmiar i odległość różnych planet.

Możesz nawet przełączać się między widokiem 3D a widokiem 2D z góry ze względną łatwością. Porozmawiaj o znakomitym wykorzystaniu frontendu!

Zacienione kostki

Te proste, zacienione kostki mogą nie wydawać się zbyt duże. Są zbudowane w CSS i automatycznie obracają się wokół jednej osi za pomocą animacji CSS3.

Istnieje jednak interaktywne ustawienie, w którym można animować kostki po najechaniu myszą. To zdecydowanie fajna sztuczka i opiera się na kilku rzadkich technikach CSS, w tym pseudoklasach :hover i :checked wraz z tilde(~) selector .

Karuzela CSS 3D

Karuzele obrazów świetnie nadają się do prezentowania grafik, zdjęć, a nawet filmów w rotacji. Dzięki tej karuzeli CSS3 możesz przenieść te zabawne suwaki na zupełnie nowy poziom.

Ta bardzo podstawowa karuzela 3D opiera się na zdarzeniach kliknięć, które umożliwiają animację między różnymi elementami. Styl 3D jest zaskakująco szczegółowy i opiera się wyłącznie na kodzie CSS.

Jedynym JavaScript potrzebnym tutaj jest przełączanie między przyciskami następny/poprzedni i animowanie stylów 3D na miejscu. I jest to właściwie coś, czego można użyć na prawdziwej stronie, więc może mieć praktyczne zastosowanie w nowoczesnym projektowaniu stron internetowych.

Wyluzuj lwa

Oto coś mniej praktycznego, ale nadal niesamowicie zabawnego w użyciu. Ten trójwymiarowy render lwa autorstwa Karima Maaloula wykorzystuje Three.js do stworzenia zabawnej gry, w której możesz wydmuchać chłodne powietrze na spoconego lwa.

Gdy przesuwasz wentylator po stronie za pomocą kursora, spojrzenie lwa podąży za nim. Następnie po prostu kliknij, aby uruchomić zmotoryzowany wentylator i obserwuj podekscytowanie lwa, gdy wysyłasz w jego stronę chłodny strumień powietrza.

Twórca posunął się nawet do stworzenia trzepoczących obszarów w lwiej grzywie wraz z ruchem w wąsach.

To kolejny szczegółowy przykład tego, jak daleko zaszły efekty 3D.

Kontroler 3D NES

Klasyczne gry odcisnęły swoje piętno na obecnej generacji programistów i można to zobaczyć za pomocą kontrolera 3D NES Johana van Tongerena, renderowanego w czystym CSS3.

Działa najlepiej w przeglądarkach Chrome/WebKit, chociaż powinien również działać poprawnie w Firefoksie. To naprawdę bardziej eksperyment, aby zobaczyć, jak daleko zaszedł CSS, więc nie oczekuj, że będzie doskonały!

Orbity Keplera

Nie wyobrażam sobie, ile czasu zajęło zbudowanie tego realistycznego modelu orbity Keplera. Ten model pokazuje ruch ciała względem drugiego w przestrzeni iw tym przypadku programista Danie Clawson wykonał niesamowitą robotę.

Cały ten model używa CSS do wizualizacji i Three.js do efektów 3D. W lewym górnym rogu znajdziesz pole opcji, w którym możesz zmienić wiele zmiennych orbity, aby wpłynąć na prędkość, rozmiar i położenie obiektu.

Możesz nawet zauważyć, że obiekt na orbicie wykorzystuje realistyczne światło z cieniowaniem na podstawie tego, która strona jest skierowana w stronę słońca. Jest to szalenie imponujące i zajmuje pierwsze miejsce na tej liście ze względu na ogromną dbałość o szczegóły.

Mam nadzieję, że te przykłady zainspirują Cię do lepszego poznania frontend developmentu, a może nawet stworzenia własnych projektów 3D.