Handige tips

Hoe indrukwekkende 3D-graphics te maken in CSS3

Pin
Send
Share
Send
Send


Het overzichtskanaal liet zien hoe je een 3D-kubus kunt maken op de online service bloggif.com. Klik hiervoor op de 3D-kubus en in het volgende venster beginnen we deze te maken. Voeg hiervoor vijf afbeeldingen toe. Toevoegen. Overweeg het voorbeeld van beren. We kiezen - het eerste, tweede, derde cijfer, vervangen het tweede, vierde en vijfde. Vervolgens moet u de rotatiesnelheid selecteren. Verlaat Rapide - dit is de gemiddelde snelheid. U kunt de achtergrond selecteren waarop de kubus wordt geplaatst. Als u zonder achtergrond wilt, hoeft u alleen maar het vakje aan te vinken - TRANSPARANT.

Kies blauw. En de draairichting. Dan drukken we op de knop - CREËER MIJN 3 D CUBE. Nu is three d cube klaar. Zet voor het downloaden een vinkje - download zonder logo en download mijn Gif. We selecteren de map om op te slaan, geven het bestand een naam en kijken wat er is gebeurd. Het resultaat was zo'n kubus, gif-animatie. Dat is alles. Pas de opgedane kennis toe. Olga Taranukha was bij je.

Waarom CSS gebruiken?

Er zijn veel manieren om 3D-afbeeldingen in HTML te maken. Gebaseerd op JS, Canvas, SVG, zelfs op WebGL gebaseerde oplossingen zijn beschikbaar, en ze hebben allemaal hun voordelen, maar er is ook CSS.

Een op CSS gebaseerde oplossing maakt geen gebruik van afbeeldingen en kan een grafische processor gebruiken om de grafische verwerking te versnellen.

Er zijn geen plug-ins vereist en CSS kan buiten de canvasmuren op uw pagina leven:

CSS 3D-graphics zijn niet zo geoptimaliseerd als WebGL. Een apart onderwerp zijn incompatibele browsers. Niettemin opent de opname van 3D-objecten in webprojecten nieuwe werkgebieden en kan deze vandaag worden gebruikt.

Niet alle browsers ondersteunen volledig de 3D-transformaties die in dit artikel worden gebruikt, dus voor de duidelijkheid zal ik het voorvoegsel -webkit gebruiken.

Vergeet niet om voorvoegsels voor Mozilla, Opera, MS toe te voegen, evenals versies zonder voorvoegsels indien nodig. Volledige CSS-versies (met voorvoegsels) bevinden zich in de projectbestanden.

De basis: een 3D-kubus maken

Eerst zullen we een eenvoudige 3D-kubus bouwen door deze in 3D-ruimte te plaatsen en te animeren. Schrijf eerst HTML-code die delen van een 3D-kubus zal vertegenwoordigen:

Ik heb het figuurelement gebruikt, maar je kunt naar eigen goeddunken een div, span of een ander type element gebruiken.

In deze HTML-code kunnen twee hoofdonderdelen worden onderscheiden: de scène waarop alles wordt geplaatst en de kubus die op de scène wordt geplaatst:

Scène voorbereiding

Het eerste wat u moet doen bij het bouwen van een 3D-model, is een element maken dat als een scène fungeert.

Stel de scènediepte in met behulp van de CSS-perspectiefeigenschap:

Als u een hogere waarde instelt voor de eigenschap perspectief, wordt een minder opvallend 3D-effect gecreëerd, terwijl een kleinere het effect meer uitgesproken maakt.

Een waarde van ongeveer 800 pixels is over het algemeen geschikt voor de meeste kleine objecten, maar als u iets groter maakt (zoals een wolkenkrabber), kunt u een lagere waarde gebruiken om meer uitgesproken hoeken te maken.

Bij het instellen van de eigenschap perspectief, moet u ook de oorsprong van het perspectief instellen (een eigenschap die de positie van de virtuele camera die naar de scène kijkt) bepaalt, gepositioneerd op de X- en Y-assen.

Vormen creëren: ruimtelijk denken

Bij het maken van 3D-vormen met behulp van HTML en CSS wordt een object voorgesteld als een set tweedimensionale vlakken.

In plaats van hoekpunten te tekenen en vormen te verzamelen van punten en lijnen, zoals u weet, gebeurt dit in andere 3D-programma's, maar werken we met tweedimensionale vlakken en plaatsen we ze tegelijkertijd. We assembleren een kubus van zes vlakken die overeenkomen met de zijkanten, top en basis.

Laten we eerst de figuurelementen een vorm en stijl geven:

De volgende stap is om aan te geven waar ze zich in de 3D-ruimte moeten bevinden.

Conversie tijd

Plaats de vormen met de eigenschap transform. CSS-transformaties bestaan ​​uit een reeks instructies die de vorm vertellen hoe te verplaatsen, roteren, kantelen en schalen. Instructies worden van links naar rechts gelezen.

Let op het gebruik van de eigenschap transform-style: wanneer deze is ingesteld op behouden-3d, worden transformaties over de zijkanten van de kubus uitgevoerd in hun eigen 3D-ruimte.

We definiëren ook het punt ten opzichte waarvan de transformaties worden uitgevoerd.

De eigenschap transform-origin stelt het punt in X-, Y-, Z-coördinaten in, die fungeert als het rotatiecentrum (dit is het midden van de voorkant van het element):

De voorste figuur is 150 pixels naar voren verschoven, de achterste is 180 graden omgedraaid en 150 pixels naar de achterkant van de scène verschoven.

De volgorde hier is belangrijk - de conversieregels worden van links naar rechts toegepast. Voor de tweede transformatie wordt een positieve waarde ingesteld: na rotatie is de voorkant naar de achterkant van de scène gericht.

Zoals eerder is de volgorde van transformatie van belang. Als het element wordt gedraaid, staat de Z-as onder een andere hoek, wat invloed heeft op elke andere transformatie.

Plaats nu de andere kanten:

Nu hebben we de kubus volledig in de 3D-scène.

Verplaatsen, verplaatsen

Laten we onze 3D-creatie op het podium draaien met behulp van CSS-animaties:

CSS-animaties worden gemaakt met behulp van een reeks hoofdframes. Hoofdframes zijn een reeks objectstatussen die zijn vastgesteld met behulp van percentages.

Animatie begint met een nulrotatie en eindigt met een volledige rotatie van het element rond de Y-as.

Pas deze keyframeset toe met de eigenschap animatie:

De rotatieanimatie die hier wordt toegepast, is ontworpen voor 10 seconden en wordt eindeloos herhaald met een constante lineaire snelheid:

We hebben een kubus die op het podium draait, maar nu wordt deze van alle kanten verlicht. Om een ​​schaduw toe te voegen zonder meer selectors te gebruiken, zullen we pseudo-selectors gebruiken.

Pseudo-selectors zijn zoiets als aanvullende HTML-elementen die voor en na de inhoud van een element kunnen worden ingevoegd.

Ze bieden ons extra functies en kunnen verlopen, kleuren of zelfs tekst bevatten. Op deze manier kunnen we het dimmen aan elke kant van de kubus animeren.

We hebben twee gradiënten nodig: een voor het geval wanneer het oppervlak naar links draait, de andere voor rotatie naar rechts:

De elementen voor en na in dit voorbeeld zijn pseudo-selectors die kunnen worden gestileerd en geanimeerd.

Het is belangrijk op te merken dat deze functie nog niet volledig wordt ondersteund door browsers - Google Chrome, Firefox en IE10 bieden verschillende ondersteuningsniveaus - en de situatie kan verbeteren.

Pas animatie toe op elke pseudo-selector om te bepalen wanneer deze verlopen moeten worden weergegeven / verborgen:

Elke animatie bestaat uit een set sleutelframes die het verloop tijdens de animatie weergeven of verbergen.

De volgende keyframes worden op de achterkant toegepast:

De volledige set animaties, samen met voorvoegsels voor elke browser, bevindt zich in de projectbestanden.

Boven en onder

De volgende stap is de boven- en onderkant van de kubus. Een hoekpunt heeft een verloop nodig dat lijkt alsof er niets beweegt.

Voeg een verloop toe aan het bovenste element en draai het in de tegenovergestelde richting:

De basis van de kubus is niet zichtbaar, maar we kunnen het gebruiken om het kenmerk box-shadow toe te voegen:

Meer dan alleen kleur

Op dit punt hebben we alleen met CSS een gearceerde geanimeerde kubus gemaakt, zij het met stevige zijkanten. Omdat we met HTML-elementen werken, kunnen we met de inhoud spelen.

De gezichten van een kubus kunnen afbeeldingen, tekst of zelfs andere animaties bevatten. In het onderstaande voorbeeld heb ik enkele achtergrondafbeeldingen van een Minecraft-game toegepast:

De arcering die we eerder hebben toegevoegd, is hier nog steeds aanwezig, waardoor de zijkanten van de kubus een sterker gevoel van diepte krijgen. Dit effect werkt voor alle inhoud in het figuurelement.

Als geanimeerde arcering en schaduw niet genoeg zijn, kunnen we een beetje meer glans aan de scène toevoegen met behulp van mooie WebKit-filters (merk op dat deze functie momenteel alleen mogelijk is met WebKit):

Inhoud toevoegen

Voeg de inhoud toe die in het gezichtsveld van de gebruiker valt wanneer de kubus wordt gedraaid. Dit gebeurt aan de rechterkant van de kubus. We koppelen een beetje JavaScript aan het werk om de knop "Volgen" (beschikbaar op de Twitter-knoppagina) aan te roepen.

Het figuurelement met klasse rechts zou zoiets als dit moeten bevatten:

De knop Volgen wordt geplaatst door een iframe-regel aan de CSS toe te voegen:

Tweet op een kubus

Twitter biedt een eenvoudige manier om de nieuwste tweets als widgets te krijgen. Om de widget te installeren, logt u in op uw Twitter-account en gaat u naar de Twitter-widgetpagina.

Selecteer "Nieuwe knop maken" en voer vervolgens uw Twitter-gebruikersnaam in het veld Gebruikersnaam in. In dit voorbeeld gebruiken we de netmag-login.

Klik op Widgetknop maken om de insluitcode te genereren.

We kunnen de widget stileren en de breedte, hoogte en enkele gegevenswaarden in de code instellen. Vervang YOUR_WIDGET_ID door de identificatie in uw insluitcode:

transformatie

Voor arcering hebben we geen animatie met keyframes nodig: deze verschijnt wanneer u een gebeurtenis aanwijst of activeert.

Voeg een paar overgangen toe aan de schaduw van de pseudo-selectors:

Voor de pseudo-selector aan de rechterkant is de dekkingwaarde van 0,4 ingesteld. Dit voegt een beetje schaduw toe en u kunt de dekking animeren zodat het gezicht lichter wordt wanneer u naar de voorkant draait.

Het recht: nadat pseudo-selector is verborgen, omdat we de kubus niet zoveel zullen roteren als nodig is. De voorkant is donker, maar is lichter dan de rechterkant als deze naar voren draait:

Zweef animatie

Door nu schaduweffecten toe te voegen, creëren we een geanimeerd "piepend" effect wanneer de gebruiker boven de kubus zweeft met behulp van de CSS-zweeftoestand:

Wanneer je zweeft, draait de kubus 50 graden naar links. Deze transformatie wordt uitgevoerd als een soepele overgang door de overgangseigenschap toe te passen.

Tegelijkertijd gaat de dekking van de pseudo-selectors aan de voor- en rechterkant van de kubus naar een waarde van 0,2.

Het resultaat van al deze overgangen is een prachtig 3D-rotatie-effect waarmee u extra inhoud kunt verbergen - en deze kunt weergeven als de gebruiker boven de kubus zweeft.

Volledige HTML- en CSS-code is te vinden in de projectbestanden:

Het maken van objecten uit platte HTML-elementen heeft een aantal beperkingen: elk object dat u maakt, moet worden gedaan door platte formulieren te combineren om het eindresultaat te krijgen.

Het is moeilijk om gebogen objecten, zoals buizen en bollen, te maken zonder een groot aantal elementen te gebruiken, dus deze oplossing is beter geschikt voor eenvoudiger objecten.

Maar door gebruik te maken van het gebruik van schaduwen en animaties, kunt u indrukwekkende resultaten krijgen met eenvoudige structuren.

Prestaties en testen

Wanneer u 3D-objecten maakt, moet u onthouden dat de prestaties van de browser en de computersnelheid sterk kunnen variëren. CSS is in feite niet geoptimaliseerd voor grafisch geladen, complexe 3D-scènes, dus u moet voorzichtig zijn bij het werken met openbare projecten.

Test op verschillende platforms: bezoekers kunnen ook mobiele apparaten of verouderde, langzame computers gebruiken.

En hoewel het slechts een kwestie van tijd is voordat alle browsers 3D-transformaties, verlopen en alle elegante details ondersteunen die we hier hebben gebruikt, is de realiteit dat de meeste browsers deze nog steeds niet ondersteunen.

We moeten ervoor zorgen dat bezoekers die oudere versies van browsers gebruiken, geen vervormde pagina krijgen.

Een manier om dit probleem op te lossen is het gebruik van functiedetectie en het weergeven van een alternatieve versie voor browsers die de gewenste eigenschappen niet ondersteunen.

In dit geval zullen we het Modernizr-script gebruiken om uit te zoeken of 3D-transformaties worden ondersteund, en zo niet, een statische afbeelding weergeven.

Schakel Modernizr in de HTML-header in om aan de slag te gaan:

Wanneer geladen, wordt de klasse csstransforms3d in de tag ingevoegd. Vervolgens zullen we deze informatie gebruiken om de back-upoptie weer te geven of te verbergen:

In dit voorbeeld is een statische afbeelding een alternatief. Gebruik het fallback div-element om tweedimensionale inhoud in een browser of alternatief bericht weer te geven:

Volgende stappen

Een gestileerde 3D-kubus is waarschijnlijk niet het eerste wat de meeste webontwerpklanten wordt gevraagd, maar sommige van de bovenstaande benaderingen kunnen een ander gebruik hebben.

U kunt een 3D-overgangseffect creëren wanneer u over het logo zweeft - een pakkende manier om een ​​nieuw product te demonstreren - of deze benaderingen gebruiken om complexe gegevens te presenteren en te navigeren. Het gebruik van de Z-as in het ontwerp opent de deur naar veel interessante en leuke ideeën.

Deze publicatie is een vertaling van het artikel "Hoe maak je indrukwekkende 3D-graphics in CSS3", opgesteld door het vriendelijke team van het internettechnologieproject

Pin
Send
Share
Send
Send