Korisni savjeti

Kako stvoriti impresivnu 3D grafiku u CSS3

Pin
Send
Share
Send
Send


Kanal Pregled pokazao je kako napraviti 3D kocku na internetskoj usluzi bloggif.com. Da biste to učinili, kliknite na 3D kocku i u sljedećem prozoru započinjemo je stvarati. Da biste to učinili, dodajte pet slika. Dodati. Razmotrimo primjer medvjeda. Biramo - prvu, drugu, treću figuru, zamjenjujemo drugom, četvrtom i petom. Dalje, morate odabrati brzinu rotacije. Napustite Rapide - ovo je prosječna brzina. Možete odabrati pozadinu na kojoj će biti kocka. Ako želite bez pozadine, samo trebate potvrditi okvir - TRANSPARENT.

Odaberite plavu. I smjer vrtnje. Zatim pritisnemo tipku - USTVARITE MOJE 3 D KUBE. Sad je spremna tri d kocke. Prije preuzimanja stavite kvačicu - preuzmi bez logotipa i preuzmi moj Gif. Odabiremo mapu za spremanje, imenujemo datoteku i vidimo što se dogodilo. Rezultat je bila takva kocka, gif animacija. To je sve. Primijenite stečena znanja. Olga Taranukha bila je s vama.

Zašto koristiti CSS?

Postoji toliko mnogo načina za stvaranje 3D grafike u HTML-u. Na osnovu JS-a, Canvasa, SVG-a, dostupna su čak i webGL rješenja koja imaju svoje prednosti, ali postoji i CSS.

CSS-ovo rješenje raspoređuje slike i može koristiti grafički procesor za ubrzanje grafičke obrade.

Dodaci nisu potrebni i CSS može živjeti izvan zidova platna na vašoj stranici:

CSS 3D grafika nije tako optimizirana kao WebGL. Zasebna tema su nekompatibilni preglednici. Uključivanje 3D objekata u web projekte otvara nova područja rada i mogu se koristiti i danas.

Nisu svi preglednici u potpunosti podržani 3D transformacije korištene u ovom članku, tako da za kratkoću koristim prefiks -webkit.

Ne zaboravite uključiti prefikse za Mozilla, Opera, MS, kao i verzije bez prefiksa ako je potrebno. Cijele CSS verzije (s prefiksima) nalaze se u projektnim datotekama.

Osnove: izrada 3D kocke

Prvo ćemo izgraditi osnovnu 3D kocku tako što ćemo je staviti i animirati u 3D prostoru. Prvo napišite HTML kôd koji će predstavljati dijelove 3D kocke:

Koristio sam element figure, ali vi možete koristiti div, span ili bilo koju drugu vrstu elementa po vlastitom nahođenju.

U ovom se HTML kôdu mogu razlikovati dva glavna dijela: scena na kojoj je sve postavljeno i kocka postavljena na scenu:

Priprema scena

Prvo što trebate napraviti prilikom izrade 3D modela jest stvoriti element koji djeluje kao scena.

Podesite dubinu scene pomoću svojstva CSS perspektive:

Postavljanjem veće vrijednosti za perspektivno svojstvo stvara se manje uočljiv 3D efekt, dok manji čini izraženijim.

Vrijednost od 800 piksela ili slično općenito je pogodna za većinu malih objekata, ali ako stvorite nešto veće (poput nebodera), možete koristiti nižu vrijednost za stvaranje izraženijih kutova.

Pri postavljanju perspektivnog svojstva također morate postaviti perspektivno podrijetlo (svojstvo koje određuje položaj virtualne kamere prema sceni), smješteno na X i Y osi.

Stvaranje obrazaca: prostorno razmišljanje

Stvaranje 3D oblika pomoću HTML i CSS uključuje predstavljanje objekta kao skupa dvodimenzionalnih ravnina.

Umjesto crtanja vrhova i prikupljanja oblika s točaka i linija, što je, kao što znate, učinjeno i u ostalim 3D programima, radit ćemo s dvodimenzionalnim ravninama, istodobno ih pozicionirajući. Sastavljamo kocku od šest ravnina koje odgovaraju stranama, vrhu i bazi.

Prvo, dajmo figurama element oblik i stil:

Sljedeći je korak naznačiti gdje se trebaju nalaziti u 3D prostoru.

Vrijeme pretvorbe

Postavite oblike koristeći svojstvo transformacije. CSS transformacije sastoje se od niza uputa koje govore obliku kako se kretati, rotirati, naginjati i razmjeravati. Upute se čitaju slijeva udesno.

Obratite pažnju na upotrebu svojstva stila transformacije: kada je postavljeno da čuva-3d, transformacije preko strana kocke vršit će se u njihovom vlastitom 3D prostoru.

Također definiramo točku u odnosu na koju se transformacije izvode.

Svojstvo porijekla transformacije postavlja točku u koordinatama X, Y, Z, koja djeluje kao središte rotacije (ovo je sredina prednje strane elementa):

Prednja figura pomaknuta je 150 piksela naprijed, stražnja je okrenuta za 180 stupnjeva, a 150 piksela je pomaknuta prema stražnjoj sceni.

Ovdje je bitan redoslijed - pravila pretvorbe primjenjuju se slijeva udesno. Za drugu transformaciju postavlja se pozitivna vrijednost: nakon rotacije prednja strana je okrenuta prema stražnjoj strani scene.

Kao i prije, važan je redoslijed promjena. Ako se element rotira, njegova Z-osi će biti pod drugim kutom, što će utjecati na bilo koju drugu transformaciju.

Sada stavite ostale strane:

Sada smo u potpunosti dobili kocku smještenu na 3D sceni.

Pomakni se, pomakni se

Rotirajmo 3D kreaciju na pozornici pomoću CSS animacija:

CSS animacije kreiraju se pomoću niza ključnih okvira. Ključni okviri su skup stanja objekata uspostavljenih pomoću postotaka.

Animacija započinje nultom rotacijom i završava potpunom rotacijom elementa oko osi Y.

Primijenite ovaj set ključnih okvira sa svojstvom animacije:

Animacija rotacije koja je ovdje primijenjena dizajnirana je za 10 sekundi, beskrajno se ponavlja stalnom linearnom brzinom:

Imamo kocku koja se okreće na pozornici, ali sada je upaljena sa svih strana. Za dodavanje sjene bez upotrebe više birača koristit ćemo pseudo-selektore.

Pseudo-selektori su nešto poput dodatnih HTML elemenata koji se mogu umetnuti prije i poslije sadržaja elementa.

Pružaju nam dodatne značajke i mogu sadržavati gradijente, boje ili čak tekst. Na ovaj način možemo animirati prigušenje na svakoj strani kocke.

Potrebna su nam dva gradijenta: jedan za slučaj kada se površina okreće ulijevo, a drugi za rotaciju udesno:

Elementi prije i poslije u ovom primjeru su pseudo-selektori koji se mogu oblikovati i animirati.

Važno je napomenuti da preglednici još ne podržavaju ovu značajku - Google Chrome, Firefox i IE10 nude različite razine podrške - a situacija se može poboljšati.

Primijenite animaciju na svaki pseudo-selektor kako biste odredili kada prikazati / sakriti ove gradijente:

Svaka animacija sastoji se od skupa ključnih okvira koji prikazuju ili skrivaju gradijent tijekom animacije.

Sljedeće su okviri ključeva primijenjeni na stražnju stranu:

Potpuni set animacija, zajedno s prefiksima za svaki preglednik, nalazi se u projektnim datotekama.

Gornji i donji

Sljedeći korak je vrh i dno kocke. Vrhunac treba gradijent koji izgleda kao da se ništa ne kreće.

Dodajte gradijent gornjem elementu i zakrenite ga u suprotnom smjeru:

Baza kocke neće biti vidljiva, ali možemo je koristiti za dodavanje atributa box-shadow:

Više od boje

U ovom trenutku, samo pomoću CSS-a, stvorili smo zasjenjenu animiranu kocku, iako s čvrstim stranama. Budući da radimo s HTML elementima, možemo se igrati sa sadržajem.

Lica kocke mogu sadržavati slike, tekst ili čak druge animacije. U primjeru u nastavku primijenio sam neke pozadinske slike iz Minecraft igre:

Zasjenjenje koje smo dodali ranije i dalje je prisutno ovdje, što stranama kocke daje jači osjećaj dubine. Taj će efekt djelovati na bilo koji sadržaj u elementu figure.

Ako animirano sjenčanje i sjena nisu dovoljni, možemo dodati malo više sjaja na scenu pomoću fantastičnih WebKit filtera (imajte na umu da je trenutno ova funkcija moguća samo uz WebKit):

Dodajte sadržaj

Dodajte sadržaj koji padne u vidno polje korisnika kada se kocka zakreće. To će se dogoditi na desnoj strani kocke. Mi povezujemo malo JavaScripta s poslom kako bismo pozvali gumb "Prati" (dostupan na stranici gumba na Twitteru).

Element figure s pravom klase trebao bi sadržavati ovako nešto:

Gumb Slijedi postavlja se dodavanjem pravila iframe u CSS:

Tweet na kocki

Twitter pruža jednostavan način za dobivanje najnovijih tweeta kao widgeta. Da biste instalirali widget, prijavite se na svoj Twitter račun i idite na Twitter widget stranicu.

Odaberite "Stvori novi gumb", a zatim u polje Korisničko ime unesite svoje korisničko ime za Twitter. U ovom primjeru koristimo prijavu u netmag.

Kliknite gumb Stvori widget za generiranje koda ugradnje.

Možemo stilizirati widget i postaviti kôd širine, visine i nekih podataka. Zamijenite YOUR_WIDGET_ID identifikatorom navedenim u vašem ugrađenom kodu:

transformacija

Za sjenčanje nam ne treba animacija s ključnim okvirima: ona će se pojaviti kada lebdite ili pokrenete događaj.

Dodajte nekoliko prijelaza zasjenivanju pseudo-selektora:

Za pseudo-selektor na desnoj strani postavlja se vrijednost neprozirnosti 0,4. To dodaje malo sjene, a neprozirnost možete animirati tako da lice postane svjetlije kada okrenete na prednju stranu.

Desno: nakon pseudo selektora je skriven, jer nećemo rotirati kocku onoliko koliko je potrebno. Prednja strana je tamna, međutim, lakša je od desne strane kada se okreće naprijed:

Zadržite animaciju

Sada, dodajući efekte sjenčanja, stvorit ćemo animirani „peeping“ efekt kada korisnik pređe preko kocke koristeći CSS stanje lebdenja:

Kad lebdite, kocka se okreće za 50 stupnjeva lijevo. Ta se transformacija izvodi kao gladak prijelaz primjenom svojstva prijelaza.

Istodobno, neprozirnost pseudo-selektora na prednjoj i desnoj strani kocke prelazi u vrijednost 0,2.

Rezultat svih ovih prijelaza je prekrasan efekt rotacije 3D koji vam omogućuje sakrivanje dodatnog sadržaja - i prikazivanje ako korisnik lebdi iznad kocke.

Potpuni HTML i CSS kôd možete naći u projektnim datotekama:

Stvaranje objekata iz ravnih HTML elemenata ima niz ograničenja: bilo koji objekt koji stvorite mora biti učinjen kombiniranjem ravnih oblika kako biste dobili konačni rezultat.

Teško je stvoriti zakrivljene predmete, poput cijevi i sfera, bez korištenja velikog broja elemenata, tako da je ovo rješenje pogodnije za jednostavnije predmete.

Ali pribjegavajući korištenju sjena i animacija, pomoću jednostavnih struktura možete dobiti impresivne rezultate.

Performanse i testiranje

Prilikom stvaranja 3D objekata morate zapamtiti da se performanse preglednika i brzina računala mogu uvelike razlikovati. CSS, u stvari, nije optimiziran za grafički učitane, složene 3D scene, tako da morate biti oprezni pri radu s javnim projektima.

Testirajte na svim platformama: posjetitelji mogu koristiti i mobilne uređaje ili zastarjela, spora računala.

I iako je samo pitanje vremena prije nego što svi preglednici podrže 3D transformacije, gradijente i sve elegantne dodire koje smo ovdje koristili, stvarnost je da ih većina preglednika i dalje ne podržava.

Moramo osigurati da posjetitelji koji koriste starije verzije preglednika ne dobiju iskrivljenu stranicu.

Jedan od načina rješavanja ovog problema je korištenje otkrivanja značajki i prikazivanje alternativne verzije za preglednike koji ne podržavaju željena svojstva.

U ovom ćemo slučaju pomoću skripte Modernizr saznati podržavaju li 3D transformacije, a ako ne, prikazati statičku sliku.

Za početak, omogućite Modernizr u HTML zaglavlju:

Kad se učita, klasa csstransforms3d bit će umetnuta u oznaku. Tada ćemo koristiti ove podatke za prikaz ili skrivanje sigurnosne kopije:

U ovom primjeru, statična slika je alternativa. Upotrijebite rezervni div element za predstavljanje dvodimenzionalnog sadržaja u pregledniku ili alternativnoj poruci:

Sljedeći koraci

Stilizirana 3D kocka vjerojatno nije prva stvar koju većina kupaca web dizajna traži da učini, ali neki od gore navedenih pristupa mogu imati različitu upotrebu.

3D efekt prijelaza možete stvoriti kada pokažite mišem iznad logotipa - privlačan način za demonstraciju novog proizvoda - ili koristite ove pristupe za predstavljanje i kretanje kroz složene podatke. Korištenje Z osi u dizajnu otvara vrata mnogim zanimljivim i zabavnim idejama.

Ova je publikacija članak članka „Kako stvoriti impresivnu 3D grafiku u CSS3“ koji je pripremio prijateljski tim projekta Internet tehnologija

Pin
Send
Share
Send
Send