Užitočné tipy

Ako vytvoriť pôsobivú 3D grafiku v CSS3

Pin
Send
Share
Send
Send


Kanál Prehľad ukázal, ako vytvoriť 3D kocku v službe online bloggif.com. Kliknite na 3D kocku a v ďalšom okne ju začneme vytvárať. Ak to chcete urobiť, pridajte päť obrázkov. Pridať. Zoberme si príklad medveďov. Vyberáme - prvú, druhú, tretiu číslicu, nahradíme druhú, štvrtú a piatu. Ďalej musíte zvoliť rýchlosť otáčania. Opustiť Rapide - to je priemerná rýchlosť. Môžete si vybrať pozadie, na ktorom bude kocka. Ak chcete bez pozadia, stačí zaškrtnúť políčko - TRANSPARENT.

Vyberte modrú farbu. A smer otáčania. Potom stlačíme tlačidlo - CREATE MY 3 D CUBE. Teraz sú pripravené tri kocky. Pred stiahnutím začiarknite políčko - stiahnuť bez loga a stiahnuť môj Gif. Vyberieme priečinok na uloženie, pomenujeme súbor a uvidíme, čo sa stalo. Výsledkom bola taká kocka, gifová animácia. To je všetko. Aplikovať získané vedomosti. Olga Taranukha bola s vami.

Prečo používať CSS?

Existuje veľa spôsobov, ako vytvoriť 3D grafiku v HTML. Na báze JS, Canvas, SVG sú k dispozícii aj riešenia založené na WebGL, pričom všetky z nich majú svoje výhody, existuje však aj CSS.

Riešenie založené na CSS sa obíde bez obrázkov a môže použiť grafický procesor na zrýchlenie spracovania grafiky.

Nie sú potrebné žiadne doplnky a CSS môže žiť mimo steny plátna na svojej stránke:

3D grafika CSS nie je tak optimalizovaná ako WebGL. Samostatnou témou sú nekompatibilné prehliadače. Zaradenie trojrozmerných objektov do webových projektov však otvára nové oblasti práce a možno ich dnes použiť.

Nie všetky prehliadače plne podporujú 3D transformácie použité v tomto článku, takže pre stručnosť budem používať predponu -webkit.

Nezabudnite zahrnúť predpony pre Mozilla, Opera, MS, ako aj verzie bez predpony, ak je to potrebné. V súboroch projektu sú úplné verzie CSS (s predponami).

Základy: vytvorenie 3D kocky

Najprv postavíme základnú 3D kocku umiestnením a animáciou v 3D priestore. Najprv napíšte HTML kód, ktorý bude predstavovať časti 3D kocky:

Použil som prvok postavy, ale podľa vlastného uváženia by ste mohli použiť delenie, rozpätie alebo akýkoľvek iný typ prvku.

V tomto kóde HTML možno rozlíšiť dve hlavné časti: scénu, na ktorej je všetko umiestnené, a kocku umiestnenú na scéne:

Príprava scény

Prvá vec, ktorú musíte urobiť pri zostavovaní 3D modelu, je vytvorenie prvku, ktorý funguje ako scéna.

Nastavte hĺbku scény pomocou vlastnosti perspektívy CSS:

Nastavením väčšej hodnoty pre vlastnosť perspektívy sa vytvorí menej zreteľný 3D efekt, zatiaľ čo menšia bude výraznejšia.

Hodnota 800 pixelov je všeobecne vhodná pre väčšinu malých objektov, ale ak vytvoríte niečo väčšie (napríklad mrakodrap), môžete použiť nižšiu hodnotu na vytvorenie výraznejších uhlov.

Pri nastavovaní vlastnosti perspektívy musíte tiež nastaviť perspektívny pôvod (vlastnosť, ktorá určuje polohu virtuálnej kamery oproti scéne) umiestnenú na osi X a Y.

Vytváranie foriem: priestorové myslenie

Vytváranie 3D tvarov pomocou HTML a CSS zahŕňa reprezentáciu objektu ako sady dvojrozmerných rovín.

Namiesto kreslenia vrcholov a zbierania tvarov z bodov a čiar, ktoré, ako viete, sa vykonáva v iných 3D programoch, budeme pracovať s dvojrozmernými rovinami a súčasne ich umiestňovať. Zostavíme kocku šiestich rovín zodpovedajúcich stranám, vrcholu a základni.

Najprv dajte figúrkovým prvkom tvar a štýl:

Ďalším krokom je určiť, kde by mali byť umiestnené v 3D priestore.

Čas konverzie

Umiestnite tvary pomocou vlastnosti transform. Transformácie CSS pozostávajú z radu pokynov, ktoré informujú formulár o tom, ako sa pohybovať, otáčať, nakláňať a meniť mierku. Pokyny sa čítajú zľava doprava.

Venujte pozornosť použitiu vlastnosti transformačného štýlu: ak je nastavená na zachovanie 3d, transformácie po stranách kocky sa uskutočnia v ich vlastnom 3D priestore.

Definujeme tiež bod, ku ktorému sa transformácie vykonávajú.

Vlastnosť transform-origin nastavuje bod v súradniciach X, Y, Z, ktorý pôsobí ako stred rotácie (to je stred prednej časti prvku):

Predná postava je posunutá o 150 pixelov vpred, zadná je otočená o 180 stupňov a posunutá o 150 pixelov na zadnú stranu scény.

Poradie tu záleží - pravidlá prevodu sa uplatňujú zľava doprava. Pre druhú transformáciu je nastavená kladná hodnota: po otočení je predná strana otočená k zadnej časti scény.

Rovnako ako predtým, poradie transformačných pravidiel je dôležité. Ak sa prvok otočí, jeho os Z bude v inom uhle, čo ovplyvní akúkoľvek inú transformáciu.

Teraz položte ďalšie strany:

Teraz máme úplne kocku umiestnenú na 3D scéne.

Pohyb, pohyb

Poďme otočiť našu 3D tvorbu na pódiu pomocou animácií CSS:

Animácie CSS sa vytvárajú pomocou postupnosti kľúčových snímok. Kľúčové snímky sú množinou stavov objektov vytvorených pomocou percent.

Animácia začína nulovou rotáciou a končí úplnou rotáciou prvku okolo osi Y.

Použite túto súpravu kľúčových snímok s vlastnosťou animácie:

Animácia rotácie použitá tu je navrhnutá na 10 sekúnd, nekonečne sa opakuje pri konštantnej lineárnej rýchlosti:

Na pódiu sa otáča kocka, ale teraz je rozsvietená zo všetkých strán. Na pridanie tieňa bez použitia viacerých selektorov použijeme pseudo-selektory.

Pseudo-selektory sú niečo ako ďalšie prvky HTML, ktoré sa dajú vložiť pred a za obsah prvku.

Poskytujú nám ďalšie funkcie a môžu obsahovať prechody, farby alebo dokonca text. Týmto spôsobom môžeme animovať stmievanie na každej strane kocky.

Potrebujeme dva prechody: jeden pre prípad, keď sa povrch otočí doľava, druhý pre rotáciu doprava:

Prvky pred a po v tomto príklade sú pseudo-selektory, ktoré môžu byť štylizované a animované.

Je dôležité si uvedomiť, že táto funkcia ešte nie je plne podporovaná prehľadávačmi - Google Chrome, Firefox a IE10 ponúkajú rôzne úrovne podpory - a situácia sa môže zlepšiť.

Použite animáciu na každý pseudo-selektor, aby ste určili, kedy zobraziť alebo skryť tieto prechody:

Každá animácia pozostáva zo sady kľúčových snímok, ktoré počas animácie zobrazujú alebo skrývajú prechod.

Na zadnú stranu sú použité kľúčové snímky:

V súboroch projektu je celá sada animácií spolu s predponami pre každý prehľadávač.

Horná a dolná časť

Ďalším krokom je horná a dolná časť kocky. Vrchol potrebuje sklon, ktorý vyzerá, akoby sa nič nepohybovalo.

Pridajte k hornému prvku gradient a otočte ho v opačnom smere:

Dno kocky nebude viditeľné, ale môžeme ho použiť na pridanie atribútu box-shadow:

Viac ako len farba

V tomto bode sme pomocou iba CSS vytvorili tieňovanú animovanú kocku, aj keď s plnými stranami. Keďže pracujeme s prvkami HTML, môžeme si s obsahom pohrať.

Tvár kocky môže obsahovať obrázky, text alebo iné animácie. V nižšie uvedenom príklade som použil niektoré obrázky na pozadí z hry Minecraft:

Tieňovanie, ktoré sme pridali predtým, je tu stále prítomné, čo dáva bokom kocky silnejší pocit hĺbky. Tento efekt bude fungovať pre akýkoľvek obsah v prvku obrázka.

Ak nestačí animované tieňovanie a tieň, môžeme do scény pridať viac lesku pomocou efektívnych filtrov WebKit (v tejto chvíli je táto funkcia možná iba s WebKit):

Pridajte obsah

Pridajte obsah, ktorý spadne do zorného poľa používateľa, keď sa kocka otočí. To sa stane na pravej strane kocky. Pripojíme malý JavaScript k práci, aby sme zavolali na tlačidlo „Sledovať“ (k dispozícii na stránke s tlačidlami Twitteru).

Prvok postavy s právom triedy by mal obsahovať niečo také:

Tlačidlo Sledovať sa umiestni pridaním pravidla iframe do CSS:

Tweet na kocke

Twitter poskytuje jednoduchý spôsob, ako získať najnovšie tweety ako widgety. Ak chcete nainštalovať miniaplikáciu, prihláste sa do svojho účtu Twitter a prejdite na stránku miniaplikácie Twitter.

Vyberte položku „Vytvoriť nové tlačidlo“ a do poľa Meno používateľa zadajte svoje používateľské meno Twitter. V tomto príklade používame prihlásenie netmag.

Kliknutím na tlačidlo Vytvoriť miniaplikáciu vygenerujete kód na vloženie.

Môžeme štylizovať widget a nastaviť šírku, výšku a niektoré hodnoty dát v kóde. Nahraďte YOUR_WIDGET_ID identifikátorom uvedeným vo vloženom kóde:

premena

Na zatienenie nepotrebujeme animáciu s kľúčovými snímkami: objaví sa, keď umiestnite kurzor myši alebo spustíte udalosť.

Pridajte tieňovanie k zatieneniu pseudo-selektorov:

Pre pseudo-selektor na pravej strane je nastavená hodnota opacity 0,4. Pridá sa malý tieň a vy môžete oživiť nepriehľadnosť, aby sa tvár otočila na prednú stranu, aby bola svetlejšia.

Vpravo: po skrytí pseudo-selektora, pretože kocku nebudeme točiť tak, ako je potrebné. Predná strana je stmavená, je však ľahšia ako pravá, keď sa otáča vpred:

Hover Animation

Po pridaní tieňovacích efektov vytvoríme animovaný efekt „vykukovania“, keď sa používateľ vznáša nad kockou pomocou stavu vznášania sa CSS:

Keď sa vznášate, kocka sa otočí o 50 stupňov doľava. Táto transformácia sa vykonáva ako plynulý prechod použitím vlastnosti prechodu.

Súčasne krytie pseudo-selektorov na prednej a pravej strane kocky prechádza na hodnotu 0,2.

Výsledkom všetkých týchto prechodov je prekrásny 3D rotačný efekt, ktorý vám umožňuje skryť ďalší obsah - a ukázať ho, ak sa používateľ vznáša nad kockou.

Úplný kód HTML a CSS nájdete v súboroch projektu:

Vytváranie objektov z plochých prvkov HTML má niekoľko obmedzení: akýkoľvek vytvorený objekt musíte urobiť kombináciou plochých formulárov, aby ste dosiahli konečný výsledok.

Je ťažké vytvoriť zakrivené predmety, ako sú rúry a gule, bez použitia veľkého počtu prvkov, takže toto riešenie je vhodnejšie pre jednoduchšie objekty.

Ale pri použití tieňov a animácií môžete dosiahnuť pôsobivé výsledky pomocou jednoduchých štruktúr.

Výkon a testovanie

Pri vytváraní 3D objektov musíte pamätať na to, že výkon prehliadača a rýchlosť počítača sa môžu značne líšiť. CSS v skutočnosti nie je optimalizovaný pre graficky načítané zložité 3D scény, takže pri práci s verejnými projektmi musíte byť opatrní.

Testujte na rôznych platformách: návštevníci môžu používať aj mobilné zariadenia alebo zastarané, pomalé počítače.

A hoci je len otázkou času, ako všetky prehliadače podporia 3D transformácie, prechody a všetky elegantné dotyky, ktoré sme tu použili, realitou je, že väčšina prehliadačov ich stále nepodporuje.

Musíme zabezpečiť, aby návštevníci používajúci staršie verzie prehliadačov nedostali skreslenú stránku.

Jedným z prístupov k riešeniu tohto problému je použitie zisťovania funkcií a zobrazenie alternatívnej verzie pre prehliadače, ktoré nepodporujú požadované vlastnosti.

V tomto prípade použijeme skript Modernizr na zistenie, či sú 3D transformácie podporované, a ak nie, na zobrazenie statického obrazu.

Ak chcete začať, povoľte Modernizr v hlavičke HTML:

Po načítaní sa do značky vloží trieda csstransforms3d. Tieto informácie potom použijeme na zobrazenie alebo skrytie možnosti zálohovania:

V tomto príklade je alternatívou statický obraz. Použite záložný prvok div na reprezentáciu dvojrozmerného obsahu v prehliadači alebo alternatívnej správy:

Ďalšie kroky

Štylizovaná 3D kocka pravdepodobne nie je prvou vecou, ​​od ktorej sa požaduje väčšina zákazníkov webdizajnu, ale niektoré z vyššie uvedených prístupov môžu mať odlišné využitie.

Efekt 3D prechodu môžete vytvoriť, keď umiestnite kurzor myši nad logo - chytľavý spôsob, ako demonštrovať nový produkt - alebo použiť tieto prístupy na prezentáciu a navigáciu komplexných údajov. Použitie osi Z v dizajne otvára dvere mnohým zaujímavým a zábavným nápadom.

Táto publikácia je prekladom článku „Ako vytvoriť pôsobivú 3D grafiku v CSS3“, ktorú pripravil priateľský tím projektu internetovej technológie.

Pin
Send
Share
Send
Send