Een gevoel van 3D creëren met de Perspective Property van CSS3

Wat je gaat creëren

In deze zelfstudie maken we een interactief element met de CSS3-perspectiefeigenschap om een gevoel van drie dimensies te geven. Deze zelfstudie leert je ook hoe je jQuery gebruikt met muisgebeurtenissen om elementposities in JavaScript te verkrijgen en hoe je de CSS-eigenschappen manipuleert.

De HTML-structuur voor de eigenschap Perspectief

We hebben een ouder-kindrelatie nodig om de eigenschap perspective goed te laten werken. Laten we eerst de HTML-structuur maken en vervolgens doorgaan met de CSS-styling.

    
  Berg
 5 dagen
 
 
 
   
  Eiland
 2 dagen

Hier zijn we twee aan het inpakken kaart elementen in een div met de id van cardsWrapper. Dit ook cardsWrapper is gewikkeld in een andere div om zijn positie in de viewport gemakkelijk te kunnen manipuleren.

Elk element met de klasse van kaart heeft een beeld element, dat de scherm en tekst elementen. De structuur is voorlopig wat vaag, maar ik zal het gebruik van elk element in de gerelateerde aankomende secties toelichten.

Laten we de volgende CSS-stijl gebruiken om onze elementen te positioneren.

#mainWrapper display: flex; justify-content: center; align-items: center; hoogte: 350 px;  #cardsWrapper weergave: flex; rechtvaardigen-inhoud: ruimte-tussen; breedte: 700 px;  .card width: 300px; hoogte: 175 px; achtergrondkleur: rood;  .afbeelding width: 100%; hoogte: 100%; achtergrondkleur: rood;

De eigenschap Perspectief gebruiken

De perspectief eigenschap is iets dat je moet instellen in je bovenliggende div die de divs bevat die je wilt transformeren met het gevoel voor perspectief. Stel je voor dat de ouder-div jouw wereld is, en het heeft een bepaalde perspectiefwaarde die je ervaart.

Laten we het toevoegen perspectief eigendom van onze parent div, dat is kaart. We selecteren de kaart element als de ouder, niet cardsWrapper, omdat we een individueel perspectiefeffect op elk kaartelement willen hebben.

Tweak de CSS van de kaart als volgt.

.kaart width: 300px; hoogte: 175 px; achtergrondkleur: rood; perspectief: 500 px;

Probeer nu een toe te voegen transformeren eigenschap aan het afbeeldingselement om het effect van het perspectief te zien.

.afbeelding width: 100%; hoogte: 100%; achtergrondkleur: rood; transformeren: rotateX (30deg);

Sinds beeld is het directe kind van kaart, het wordt beïnvloed door het perspectief. Als u echter probeert een a toe te voegen transformeren eigendom van elk kind van de beeld, dit zou niet werken.

Om deze kinderen te transformeren ten opzichte van hun ouder, dat is het beeld element in dit voorbeeld moet u gebruiken transformatiestijl: behouden-3d op het bovenliggende element.

.afbeelding width: 100%; hoogte: 100%; transformatiestijl: bewaren-3d; transformeren: rotateX (30deg);

Nu hebben we een voldoende achtergrond in de eigenschap perspective en zijn we klaar om door te gaan met het stylen van de andere elementen.

Vergeet niet om de transformeren: rotateX (30 graden) van je afbeeldingselement.

Styling van de kaarten

We hebben een beeld element, en daarboven hebben we een element genaamd scherm, en dan de tekst. Omdat we hier perspectief gebruiken, kunt u elk van deze elementen als afzonderlijke lagen beschouwen.

Nu zullen we een achtergrondafbeelding toevoegen aan onze beeld div en style het scherm en tekst elementen.

Laten we de volgende CSS-stijl gebruiken om een achtergrondafbeelding aan elk afzonderlijk kaartobject toe te voegen.

.image.first background-image: url ("https://c1.staticflickr.com/1/343/31652757460_b2b5794a51_n.jpg");  .image.second background-image: url ("https://c2.staticflickr.com/2/1506/25121644830_2d768ef51a_n.jpg");

Nu zullen we het stylen scherm element.

Omdat we het willen scherm element exact dezelfde grootte als het bovenliggende element beeld element gebruiken we 100% breedte- en hoogtewaarden en een grijszwarte achtergrondkleur met een alfakanaal.

Het importgedeelte is transformeren: translateZ (30px) schaal (0.940).

Dus hier vertalen we gewoon de scherm element op de Z-as met 20 px. Hierdoor zweeft het boven de beeld element. Omdat het voor ons is, zal het groter zijn vanwege de regels van het perspectief. Daarom schalen we het af om de grootte aan te passen aan het bovenliggende element. Als u verschillende vertaalwaarden gebruikt, zou de schaalwaarde variëren. Evenzo zou het definiëren van verschillende hoogte- en breedtematen voor het ouderelement resulteren in een vereiste van een verschillende schaalwaarde.

.scherm background-color: rgba (0, 0, 0, 0.22); breedte: 100%; hoogte: 100%; transformatie: translateZ (30px) schaal (0,940);

Om te begrijpen wat hier gebeurt, draait u gewoon uw beeld element rond de X- en Y-assen door de volgende regel toe te voegen aan uw CSS-regel:

transformeren: rotateX (30deg) rotateY (30deg)

Nu is het laatste deel voor deze sectie het stylen van de tekst element, dat is vrij triviaal.

We gebruiken in feite dezelfde transformatie-instellingen voor de tekst element om het op hetzelfde niveau te hebben als het scherm element. De rest van de CSS is gewoon een eenvoudige stijl. Je kunt het aanpassen zoals jij dat wilt.

.tekst positie: absoluut; onderaan: 25px; links: 30px; kleur wit; transformatie: translateZ (30px) schaal (0,940);  .text p cursor: standaard; opvulling: 0; marge: 0;  .text p: first-of-type font-size: 2em; margin-bottom: 5px;  .text p: laatste-van-type font-size: 1em;

Dit is het eindresultaat met handmatige rotatie om het effect te zien.

Voordat u verder gaat, verwijdert u de rotatieregels van uw CSS, omdat we de rotatie automatisch zullen regelen in overeenstemming met de cursorpositie.

Nu zullen we een aantal jQuery-code schrijven om die kaarten interactief te maken.

Laten we ernaar toe gaan!

Interactie toevoegen met jQuery

Laten we beginnen met de base jQuery-code.

(functie ($) ) (jQuery);

We zullen alles in deze functie schrijven. Hierdoor kan jQuery wachten tot de DOM gereed is.

Omdat we geïnteresseerd zijn in interactie met onze kaart element, we moeten het selecteren.

(functie ($) var card = $ (". card");) (jQuery);

De volgende stap is het registreren van de cursorpositie op het kaartelement. Om dit te doen, zullen we de ingebouwde gebruiken mousemove evenement.

(functie ($) var card = $ (". card"); card.on ('mousemove', functie (e) );) (jQuery);

Nu moeten we de cursorpositie volgen. Het is een beetje lastig om de juiste waarden te krijgen.

(functie ($) var card = $ (". card"); card.on ('mousemove', functie (e) var x = e.clientX - $ (this) .offset (). left + $ ( venster) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (););) (jQuery);

Hier, e.clientX en e.clientY plaats de cursorpositie in de viewport. Echter, sinds elk kaart object ten opzichte van de viewport is gepositioneerd, moeten we dit compenseren door de linker en bovenste offsetwaarden te extraheren.

Het laatste en het belangrijkste om te overwegen is compensatie voor venster scrollen. Omdat uw cursorpositie dus relatief is ten opzichte van uw viewport, maar de offsetwaarden zijn vastgesteld, komt uw object dichter bij de boven- of linkerkant van de viewport wanneer u scrolt, afhankelijk van de richting waarin u scrolde.

Als gevolg hiervan zou onze relatieve afstand tot de bovenkant of de linkerkant van de viewport kleiner zijn. Aangezien de offsetwaarden echter zijn vastgesteld, moeten we dit compenseren, en dit gebeurt door de $ (Venster) .scrollLeft () en $ (Venster) .scrollTop (). Dus, door deze waarden toe te voegen aan de respectieve variabelen, compenseren we gewoon het bedrag dat we hebben gescrold. Dientengevolge, wanneer je je muis boven een van je beweegt kaart elementen, zou uw X-positie variëren van 0 tot de breedte van de kaart, die is gedefinieerd als 300px. Evenzo zou de Y-positie variëren van 0 tot de hoogte van de kaart, die 175 px is.

De volgende stap is het in kaart brengen van de cursorpositie naar een nieuw bereik, wat de hoeveelheid rotatie is die we in gradeneenheden willen toepassen, zodat wanneer de cursor in het midden van het kaartelement staat, deze er gewoon plat uitziet, maar wanneer je naar links / rechts of boven / onder beweegt, krijg je een rotatie-effect alsof de kaart de cursor volgt.

Hier is een korte illustratie voor het resultaat van de mappingfunctie.

functiekaart (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + uit_min;

In deze functie, de in_min en in_max parameters zijn de minimum- en maximumwaarden van de invoerwaarde die overeenkomen met de breedte en hoogte van de kaart element. out_min en out_max zijn de minimum- en maximumwaarden waarmee de invoer wordt toegewezen.

Laten we deze kaartfunctie gebruiken met onze X- en Y-cursorposities.

(functie ($) var card = $ (". card"); card.on ('mousemove', functie (e) var x = e.clientX - $ (this) .offset (). left + $ ( venster) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = kaart (y, 0, $ (this) .height (), -17, 17);); functiekaart (x, in_min, in_max, out_min, out_max) ga terug (x - in_min) * (out_max - out_min) / (in_max - in_min) + uit_min;) (jQuery);

Nu zijn onze in kaart gebrachte waarden rX en ry.

De volgende stap is het instellen van een CSS-regel voor de beeld element door de toegewezen waarden als rotatiewaarden te gebruiken.

(functie ($) var card = $ (". card"); card.on ('mousemove', functie (e) var x = e.clientX - $ (this) .offset (). left + $ ( venster) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = kaart (y, 0, $ (this) .height (), -17, 17); $ (this) .children (". Image"). Css ("transformeren") , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)");); functiekaart (x, in_min, in_max, out_min, out_max) ga terug (x - in_min) * (out_max - out_min) / (in_max - in_min) + uit_min;) (jQuery);

Hier hebben we de kinderen van de kaart element met de naam beeld, en stel vervolgens de CSS-regel in om dit element rond de X- en Y-assen te roteren rX en ry graden respectievelijk.

Je zult je realiseren dat de kaartelementen de cursor in hun respectievelijke perspectieven volgen. Wanneer de cursor echter uit de kaartelementen is, behouden deze hun oriëntaties. Bovendien reageren ze abrupt op de aanwezigheid van de cursor op het kaartelement. Dus we moeten ook die gevallen behandelen wanneer de muis het kaartelement binnengaat en verlaat.

Om deze problemen aan te pakken, moeten we de MouseEnter en mouseLeave events.

Wanneer de muis het gebied van de kaart element, voegen we een overgangs CSS-regel toe aan de beeld element. Dit maakt een soepele overgang mogelijk voor de "blik" van de beeld element.

card.on ('mouseenter', function () $ (this) .children (". image"). css (transition: "all" + 0.05 + "s" + "linear"););

Evenzo moeten we omgaan met de mouseLeave evenement.

Hier voeg ik ook een andere CSS-overgangsregel toe met een andere timing, die een soepeler overgang naar de beginpositie maakt wanneer de muis de muis verlaat. kaart element.

Ik voeg ook de transform CSS-regel toe om de rotaties van de te resetten kaart element.

card.on ('mouseleave', function () $ (this) .children (". image"). css (transition: "all" + 0.2 + "s" + "linear"); $ (this) .children (". image"). css ("transformeren", "rotateY (" + 0 + "deg)" + "" + "rotateX (" + 0 + "deg)"););

Onze uiteindelijke jQuery-code ziet er dus als volgt uit:

(functie ($) var card = $ (". card"); card.on ('mousemove', functie (e) var x = e.clientX - $ (this) .offset (). left + $ ( venster) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (window) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = kaart (y, 0, $ (this) .height (), -17, 17); $ (this) .children (". Image"). Css ("transformeren") , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)");); card.on ('mouseenter', function () $ (this). children (". image"). css (transition: "all" + 0.05 + "s" + "linear",);); card.on ('mouseleave', function () $ (this). children (". image"). css (transition: "all" + 0.2 + "s" + "linear",); $ (this) .children (". image"). css ("transform", " rotateY ("+ 0 +" deg) "+" "+" rotateX ("+ 0 +" deg) ");); functieoverzicht (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + uit_min;) (jQuery);

Hier is het eindresultaat. Ik heb ook een ander schreefloos lettertype gebruikt op de tekst element om het er beter uit te laten zien.

Conclusie

In deze zelfstudie leerden we de eigenschap perspective en de vereiste HTML-structuur te gebruiken om deze correct te laten werken. Bovendien hebben we besproken hoe de positie van de muiscursor te registreren wanneer deze over een specifiek HTML-element zweeft.

Daarbovenop gebruikten we de mousemove, MouseEnter, en mouseLeave evenementen om interactiviteit te introduceren door CSS-regels toe te voegen aan HTML-elementen met jQuery.

Ik hoop dat je deze tutorial leuk vond en wat handige methoden hebt geleerd.

Code