Nuttige wenke

Hoe u indrukwekkende 3D-grafika in CSS3 kan skep

Pin
Send
Share
Send
Send


Die oorsigkanaal het gewys hoe om 'n 3D-kubus te maak op die bloggif.com-aanlyndiens. Om dit te doen, klik op die 3D-kubus en in die volgende venster begin ons dit te skep. Om dit te doen, voeg vyf prente by. By te voeg. Beskou die voorbeeld van bere. Ons kies - die eerste, tweede, derde figuur, vervang die tweede, vierde en vyfde. Vervolgens moet u die rotasiesnelheid kies. Verlaat Rapide - dit is die gemiddelde snelheid. U kan die agtergrond kies waarop die kubus sal wees. As u sonder 'n agtergrond wil hê, moet u die kassie - TRANSPARENT, merk.

Kies blou. En die draairigting. Dan druk ons ​​op die knoppie - CREATE MY 3 D CUBE. Hier is drie kubusse gereed. Voordat u dit aflaai, sit 'n regmerkie - laai dit af sonder 'n logo en laai my Gif af. Ons kies die lêergids, noem die lêer en kyk wat gebeur het. Die resultaat was so 'n kubus, gif-animasie. Dit is al. Pas die opgedane kennis toe. Olga Taranukha was saam met jou.

Waarom CSS gebruik?

Daar is baie maniere om 3D-grafika in HTML te skep. Gebaseer op JS, Canvas, SVG, is selfs WebGL-gebaseerde oplossings beskikbaar, en almal het hul voordele, maar daar is ook CSS.

'N CSS-gebaseerde oplossing maak gebruik van beelde en kan 'n grafiese verwerker gebruik om grafiese verwerking te bespoedig.

Geen inproppe is nodig nie, en CSS kan buite die doekmure op u bladsy woon:

CSS 3D-grafika is nie so geoptimaliseerd soos WebGL nie. 'N Afsonderlike onderwerp is onversoenbare blaaiers. Desondanks maak die insluiting van 3D-voorwerpe in webprojekte nuwe werksareas oop en kan dit vandag gebruik word.

Nie alle blaaiers ondersteun die 3D-transformasies wat in hierdie artikel gebruik word nie, dus gebruik ek die -webkit-voorvoegsel.

Moenie vergeet om voorvoegsels vir Mozilla, Opera, MS, sowel as weergawes sonder voorvoegsels, indien nodig, in te sluit nie. Volledige CSS-weergawes (met voorvoegsels) is in die projeklêers.

Die basiese beginsels: die skep van 'n 3D-kubus

Eerstens sal ons 'n basiese 3D-kubus bou deur dit in 3D-ruimte te plaas en te animeer. Skryf eers HTML-kode wat dele van 'n 3D-kubus sal verteenwoordig:

Ek het die figuurelement gebruik, maar u kon 'n div, span of enige ander soort element gebruik volgens u oordeel.

In hierdie HTML-kode kan twee hoofdele onderskei word: die toneel waarop alles geplaas is, en die kubus op die toneel:

Toneelvoorbereiding

Die eerste ding wat u moet doen as u 'n 3D-model bou, is om 'n element te skep wat as toneel optree.

Stel die toneeldiepte met behulp van die CSS-perspektief eienskap:

Die instelling van 'n groter waarde vir die perspektiefeienskap skep 'n minder opvallende 3D-effek, terwyl 'n kleiner een dit meer uitspreek.

'N Waarde van 800 pixels is meestal geskik vir die meeste klein voorwerpe, maar as u iets groter skep (soos 'n wolkekrabber), kan u 'n laer waarde gebruik om meer uitgesproke hoeke te skep.

Wanneer u die perspektiefeienskap instel, moet u ook perspektief-oorsprong instel ('n eienskap wat die posisie bepaal van die virtuele kamera na die toneel), geposisioneer op die X- en Y-as.

Skepping van vorms: ruimtelike denke

Die skep van 3D-vorms met HTML en CSS behels die voorstelling van 'n voorwerp as 'n stel tweedimensionele vlakke.

In plaas daarvan om hoekpunte te teken en vorms van punte en lyne te versamel, wat, soos u weet, in ander 3D-programme gedoen word, werk ons ​​met tweedimensionele vliegtuie en plaas dit terselfdertyd. Ons sit 'n kubus van ses vliegtuie bymekaar wat ooreenstem met die sye, toppunt en basis.

Laat ons eerstens die figuurelemente 'n vorm en styl gee:

Die volgende stap is om aan te dui waar hulle in 3D-ruimte moet geleë wees.

Gesprekstyd

Plaas die vorms met behulp van die transforme-eienskap. CSS-transformasies bestaan ​​uit 'n reeks instruksies wat die vorm aandui hoe om te beweeg, draai, kantel en skaal. Instruksies word van links na regs gelees.

Let op die gebruik van die eiendom in transformasie-styl: as dit ingestel is om 3D te bewaar, sal transformasies aan die kante van die kubus in hul eie 3D-ruimte uitgevoer word.

Ons definieer ook die punt relatief waarteen die transformasies uitgevoer word.

Die eienskap van transform-oorsprong stel die punt in X, Y, Z-koördinate, wat dien as die middelpunt van die rotasie (dit is die middel van die voorkant van die element):

Die voorste figuur word 150 pixels vorentoe geskuif, die agterste een word 180 grade omgeswaai en 150 pixels na die agterkant van die toneel geskuif.

Die volgorde hier is van belang - die omskakelingsreëls word van links na regs toegepas. Vir die tweede transformasie word 'n positiewe waarde bepaal: na rotasie is die voorkant na die agterkant van die toneel.

Soos voorheen, is die reël van transformasie van belang. As die element geroteer word, sal die Z-as onder 'n ander hoek wees, wat enige ander transformasie sal beïnvloed.

Plaas nou die ander kante:

Nou het ons die kubus heeltemal op die 3D-toneel geleë.

Beweeg, beweeg

Kom ons draai ons 3D-skepping op die verhoog met behulp van CSS-animasies:

CSS-animasies word geskep met behulp van 'n reeks sleutelrame. Sleutelraamwerke is 'n stel objekstate wat met behulp van persentasies bepaal word.

Animasie begin met 'n nul rotasie en eindig met 'n volledige rotasie van die element om die Y-as.

Pas hierdie sleutelraamstel toe met die animasie-eienskap:

Die rotasie-animasie wat hier toegepas word, is vir tien sekondes ontwerp, en eindeloos herhaal met 'n konstante lineêre snelheid:

Ons het 'n kubus wat op die verhoog draai, maar nou word dit van alle kante verlig. Om 'n skaduwee by te voeg sonder om meer keurders te gebruik, gebruik ons ​​pseudo-keurders.

Pseudo-keurders is iets soos addisionele HTML-elemente wat voor en na die inhoud van 'n element ingevoeg kan word.

Dit bied ons ekstra funksies en kan gradiënte, kleure of selfs teks bevat. Op hierdie manier kan ons die verdowing aan weerskante van die kubus animeer.

Ons het twee gradiënte nodig: een vir die geval as die oppervlak na links draai, en die ander om na regs te draai:

Die voor- en na-elemente in hierdie voorbeeld is pseudo-keurders wat gestileer en geanimeer kan word.

Dit is belangrik om daarop te let dat hierdie funksie nog nie ten volle deur blaaiers ondersteun word nie - Google Chrome, Firefox en IE10 bied verskillende vlakke van ondersteuning - en die situasie kan verbeter.

Pas animasie toe op elke pseudo-selector om te bepaal wanneer hierdie gradiënte vertoon / verberg moet word:

Elke animasie bestaan ​​uit 'n stel sleutelrame wat die helling tydens die animasie vertoon of verberg.

Die volgende is sleutelrame wat aan die agterkant toegepas word:

Die volledige stel animasies, saam met voorvoegsels vir elke blaaier, is in die projeklêers.

Bo en onder

Die volgende stap is die bokant en onderkant van die kubus. 'N Hoogtepunt benodig 'n helling wat lyk asof niks beweeg nie.

Voeg 'n helling by die boonste element en draai dit in die teenoorgestelde rigting:

Die basis van die kubus sal nie sigbaar wees nie, maar ons kan dit gebruik om die eienskap van 'n vakkie-skadu by te voeg:

Meer as net kleur

Op hierdie punt, slegs met behulp van CSS, het ons 'n geskakeerde geanimeerde kubus geskep, hoewel met soliede kante. Aangesien ons met HTML-elemente werk, kan ons met die inhoud rondspeel.

Die gesigte van 'n kubus kan beelde, teks of selfs ander animasies bevat. In die voorbeeld hieronder het ek 'n paar agtergrondprente van 'n Minecraft-spel toegepas:

Die skadu wat ons vroeër bygevoeg het, is nog steeds hier, wat die kante van die kubus 'n sterker diepte gee. Hierdie effek werk vir enige inhoud in die figuurelement.

As geanimeerde skadu en skaduwee nie voldoende is nie, kan ons 'n bietjie meer glans op die toneel voeg deur fancy WebKit-filters te gebruik (let daarop dat hierdie funksie op die oomblik slegs met WebKit moontlik is):

Voeg inhoud by

Voeg die inhoud by wat in die gebruiker se gesigsveld val wanneer die kubus gedraai word. Dit sal aan die regterkant van die kubus gebeur. Ons koppel 'n bietjie JavaScript aan die werk om die 'Volg'-knoppie te noem (beskikbaar op die Twitter-knoppiesblad).

Die figuurelement met klasreg moet so iets bevat:

Die Volg-knoppie word geplaas deur 'n iframe-reël aan die CSS toe te voeg:

Tweet op 'n kubus

Twitter bied 'n maklike manier om die nuutste tweets as widgets te kry. Om die widget te installeer, moet u by u Twitter-rekening aanmeld en na die Twitter-widget-bladsy gaan.

Kies "Maak nuwe knoppie" en voer dan u Twitter-gebruikersnaam in die veld Gebruikersnaam in. In hierdie voorbeeld gebruik ons ​​die netmag-aanmelding.

Klik op Maak widgetknoppie om die inbedkode te genereer.

Ons kan die widget stiliseer en die breedte, hoogte en sommige datawaardes in die kode instel. Vervang YOUR_WIDGET_ID met die identifiseerder wat in u inbedkode voorsien word:

transformasie

Vir skaduwee hoef ons nie animasie met sleutelrame te hê nie: dit sal verskyn wanneer u 'n gebeurtenis muis of aktiveer.

Voeg 'n paar oorgange in die skadu van die pseudo-keurders:

Die ondeursigtigheidswaarde van 0,4 word vir die pseudo-selector aan die regterkant gestel. Dit voeg 'n bietjie skaduwee by, en jy kan die dekking oplig, sodat die gesig ligter word as jy na die voorkant draai.

Die regterkant: nadat die pseudo-selector weggesteek is, aangesien ons nie die kubus so veel kan draai as wat nodig is nie. Die voorkant is verduister, maar dit is ligter as die regte kant as dit vorentoe draai:

Hover-animasie

As ons nou skadu-effekte byvoeg, sal ons 'n geanimeerde 'piepende' effek skep wanneer die gebruiker oor die kubus hang met behulp van die CSS-hover-toestand:

As u hover, draai die kubus 50 grade na links. Hierdie transformasie word uitgevoer as 'n gladde oorgang deur die oorgangseienskap toe te pas.

Terselfdertyd neem die ondeursigtigheid van die pseudo-keurders aan die voor- en regterkant van die kubus 'n waarde van 0,2.

Die resultaat van al hierdie oorgange is 'n pragtige 3D-rotasie-effek wat u toelaat om bykomende inhoud te verberg - en te wys of die gebruiker oor die kubus hang.

Volledige HTML- en CSS-kode kan in die projeklêers gevind word:

Die skep van voorwerpe uit plat HTML-elemente het 'n aantal beperkings: enige objek wat u skep, moet gedoen word deur plat vorms te kombineer om die finale resultaat te kry.

Dit is moeilik om geboë voorwerpe, soos buise en sfere, te skep sonder om 'n groot aantal elemente te gebruik, dus is hierdie oplossing beter geskik vir eenvoudiger voorwerpe.

Maar as u gebruik maak van skaduwees en animasies, kan u met eenvoudige strukture indrukwekkende resultate kry.

Prestasie en toetsing

Wanneer u 3D-voorwerpe skep, moet u onthou dat die blaaierprestasie en rekenaarsnelheid baie kan wissel. CSS is in werklikheid nie geoptimaliseer vir grafies gelaaide, ingewikkelde 3D-tonele nie, dus u moet versigtig wees as u aan openbare projekte werk.

Toets op platforms: besoekers kan ook mobiele toestelle of verouderde, stadige rekenaars gebruik.

En hoewel dit net 'n kwessie van tyd is voordat alle blaaiers 3D-transformasies, gradiënte en al die elegante aanrakinge wat ons hier gebruik het, ondersteun, is die werklikheid dat die meeste blaaiers hulle steeds nie ondersteun nie.

Ons moet toesien dat besoekers wat ouer weergawes van blaaiers gebruik nie 'n verwronge bladsy kry nie.

Een benadering om hierdie probleem op te los, is om funksie-opsporing te gebruik en 'n alternatiewe weergawe vir blaaiers wat nie die gewenste eienskappe ondersteun nie, te vertoon.

In hierdie geval gebruik ons ​​die Modernizr-skrif om uit te vind of 3D-transformasies ondersteun word, en indien nie, 'n statiese beeld vertoon.

Aktiveer Modernizr in die HTML-kop:

As dit gelaai word, word die csstransforms3d-klas in die tag aangebring. Dan sal ons hierdie inligting gebruik om die rugsteunopsie te wys of te verberg:

In hierdie voorbeeld is 'n statiese beeld 'n alternatief. Gebruik die fallback div-element om tweedimensionele inhoud in 'n blaaier of alternatiewe boodskap voor te stel:

Volgende stappe

'N Gestileerde 3D-kubus is waarskynlik nie die eerste ding wat die meeste webontwerpkliënte gevra word om te doen nie, maar sommige van die bogenoemde benaderings kan verskillende gebruike hê.

U kan 'n 3D-oorgangseffek skep wanneer u oor die logo hang - 'n pakkende manier om 'n nuwe produk te demonstreer - of hierdie benaderings gebruik om ingewikkelde data aan te bied en te navigeer. Die gebruik van die Z-as in die ontwerp maak die deur oop vir baie interessante en prettige idees.

Hierdie publikasie is 'n vertaling van die artikel "Hoe om indrukwekkende 3D-grafika in CSS3 te skep", voorberei deur die vriendelike span van die internettegnologieprojek

Pin
Send
Share
Send
Send