Å skape en følelse av 3D med perspektivet Egenskapen til CSS3

Hva du skal skape

I denne opplæringen vil vi lage et interaktivt element med CSS3 perspektivegenskapen for å gi en følelse av tre dimensjoner. Denne opplæringen vil også lære deg hvordan du bruker jQuery med museventil for å få elementposisjoner i JavaScript og hvordan du kan manipulere CSS-egenskapene.

HTML-strukturen for Perspective Property

Vi trenger et foreldre-barn forhold for perspektivet egenskap for å fungere skikkelig. La oss først lage HTML-strukturen, og fortsett deretter med CSS-styling.

 
 
 
 
 
 
fjell
 
5 dager
 
 
 
 
 
 
 
 
Øy
 
2 dager
 
 
 
 
 

Her pakker vi inn to kort elementer inn i en div med ID av cardsWrapper. Også dette cardsWrapper er pakket inn i en annen div for å kunne manipulere sin posisjon i visningsporten enkelt.

Hvert element med klassen av kort har en bilde element som omfavner skjerm og tekst elementer. Strukturen er litt vag for tiden, men jeg vil forklare bruken av hvert element i de tilhørende kommende seksjonene.

La oss bruke følgende CSS-styling for å plassere elementene våre.

#mainWrapper display: flex; begrunn-innhold: center; justeringselementer: center; høyde: 350px;  #cardsWrapper display: flex; begrunn-innhold: mellomrom mellom; bredde: 700px;  .card width: 300px; høyde: 175px; bakgrunnsfarge: rød;  .image width: 100%; høyde: 100%; bakgrunnsfarge: rød; 

Bruke Perspective Property

De perspektiv Egenskapen er noe du må sette inn i din foreldre div som inneholder divsene du vil forvandle med perspektivet. Tenk deg at foreldre div er din verden, og den har en viss perspektivverdi som du opplever.

La oss legge til perspektiv eiendom til vår foreldre div, som er kort. Vi velger den kort element som foreldre, ikke cardsWrapper, siden vi ønsker å ha en individuell perspektivpåvirkning på hvert kortelement.

Tweak CSS av kort som følger.

.kort bredde: 300px; høyde: 175px; bakgrunnsfarge: rød; perspektiv: 500px; 

Prøv nå å legge til en forvandle Egenskapen til bildeelementet for å se effekten av perspektivet.

.bilde bredde: 100%; høyde: 100%; bakgrunnsfarge: rød; transformere: rotateX (30deg); 

Siden bilde er det direkte barn av kort, det påvirkes av perspektivet. Men hvis du prøver å legge til en forvandle eiendom til ethvert barn av bilde, dette ville ikke fungere.

For at disse barna skal forvandles i forhold til foreldrene deres, som er bilde element i dette eksemplet, bør du bruke transform-stil: preserve-3d på foreldreelementet.

.bilde bredde: 100%; høyde: 100%; transform-stil: preserve-3d; transformere: rotateX (30deg); 

Nå har vi en tilstrekkelig bakgrunn i perspektivet og er klar til å fortsette med styling de andre elementene.

Ikke glem å fjerne transformere: rotateX (30deg) fra bildeelementet ditt.

Styling kortene

Vi har en bilde element, og på toppen av det har vi et element som heter skjerm, og deretter tekst. Siden vi bruker perspektiv her, kan du tenke på hver av disse elementene som individuelle lag.

Nå vil vi legge til et bakgrunnsbilde til vår bilde div og deretter stilen skjerm og tekst elementer.

La oss bruke følgende CSS-styling for å legge til et bakgrunnsbilde til hvert enkelt kortobjekt.

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

Nå skal vi stilte skjerm element.

Siden vi vil skjerm element for å være nøyaktig samme størrelse som forelder bilde element, bruker vi 100% bredde og høydeverdier og en grå svart bakgrunnsfarge med en alfakanal.

Importdelen er transformere: translateZ (30px) skala (0,940).

Så her oversetter vi bare skjerm element på Z-aksen med 20px. Dette gjør det svinger over bilde element. Siden det er mot oss, blir det større i størrelse på grunn av perspektivets regler. Derfor skalerer vi det ned for å matche størrelsen med foreldreelementet. Hvis du bruker forskjellige oversettelsesverdier, vil skalaverdien variere. På samme måte vil definere forskjellige høyde- og breddestørrelser for overordnet elementet resultere i et krav om en annen skaleringsverdi.

.skjerm bakgrunnsfarge: rgba (0, 0, 0, 0.22); bredde: 100%; høyde: 100%; transformere: translateZ (30px) skala (0,940); 

For å forstå hva som skjer her, bare roter din bilde element rundt X- og Y-aksene ved å legge til følgende linje i CSS-regelen:

transformere: rotateX (30deg) rotereY (30deg)

Nå er den siste delen av denne delen styling av tekst element, som er ganske trivielt.

Vi bruker i utgangspunktet de samme transformasjonsinnstillingene for tekst element for å få det på samme nivå som skjerm element. Resten av CSS er bare enkel styling. Du kan tilpasse det slik du vil.

.tekst posisjon: absolutt; bunn: 25px; igjen: 30px; farge: hvit; transformere: translateZ (30px) skala (0,940);  .text p cursor: default; polstring: 0; margin: 0;  .text p: first-of-type font-size: 2em; margin-bunn: 5px;  .text p: siste-of-type font-size: 1em; 

Dette er det endelige resultatet med manuell rotasjon for å se effekten.

Før du fortsetter, slett du rotasjonsreglene fra CSS, siden vi vil kontrollere rotasjonen automatisk i samsvar med markørposisjonen.

Nå skal vi skrive noe jQuery-kode for å gjøre disse kortene interaktive.

La oss komme til det!

Legger til interaksjon med jQuery

La oss starte med basen jQuery-koden.

(funksjon ($) ) (jQuery);

Vi skal skrive alt inne i denne funksjonen. Dette vil tillate jQuery å vente til DOM er klar.

Siden vi er interessert i å samhandle med vår kort element, vi må velge den.

(funksjon ($) var kort = $ (".kort");) (jQuery);

Det neste trinnet er å registrere markørposisjonen på kortelementet. For å gjøre det, bruker vi den innebygde mousemove begivenhet.

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

Nå må vi spore markørposisjonen. Det er litt vanskelig å få de riktige verdiene.

(funksjon ($) var kort = $ (".kort"); card.on ('mousemove', funksjon (e) var x = e.clientX - $ (this) .offset (). left + $ vinduet) .scrollLeft (); var y = e.clientY - $ (dette) .offset (). toppen + $ (vindu) .scrollTop (););) (jQuery);

Her, e.clientX og e.clientY returner markørposisjonen inne i visningsporten. Men siden hver kort objektet er plassert i forhold til visningsporten, må vi kompensere for dette ved å trekke ut de venstre og øverste offsetverdiene.

Den siste og viktigste tingen å vurdere er kompensasjon for vindurulling. Så, siden markørposisjonen er registrert i forhold til visningsporten din, men forskyvningsverdiene er løst, når du ruller, kommer objektet nærmere toppen eller til venstre for visningsporten avhengig av hvilken retning du rullet inn. 

Som et resultat vil vår relative avstand til toppen eller til venstre for visningsporten være mindre. Men siden offsetverdiene er løst, må vi kompensere for dette, og dette gjøres av $ (Vindu) .scrollLeft () og $ (Vindu) .scrollTop (). Så, ved å legge disse verdiene til de respektive variablene, kompenserer vi bare for mengden vi rullet. Som et resultat, når du svinger over noen av dine kort elementer, vil X-posisjonen variere fra 0 til bredden på kortet, som er definert som 300px. På samme måte vil Y-posisjonen variere fra 0 til høyden på kortet, som er 175px.

Det neste trinnet er å kartlegge markørposisjonen til et nytt område, som vil være hvor mye rotasjon vi ønsker å søke i gradenheter, slik at når markøren står midt i kortelementet, vil det bare se flatt ut, men Når du flytter til venstre / høyre eller øverst / bunn, vil du få en rotasjonseffekt som om kortet følger markøren.

Her er en rask illustrasjon for resultatet av kartleggingsfunksjonen.

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

I denne funksjonen, den in_min og in_max Parametrene er henholdsvis minimums- og maksimumverdiene for inngangsverdien, som tilsvarer bredden og høyden på kort element. out_min og out_max er minimums- og maksimumverdiene som inngangen skal kartlegges.

La oss bruke denne kartfunksjonen med våre X- og Y-markørposisjoner.

(funksjon ($) var kort = $ (".kort"); card.on ('mousemove', funksjon (e) var x = e.clientX - $ (this) .offset (). left + $ vinduet) .scrollLeft (); var y = e.clientY - $ (dette) .offset (). toppen + $ (vindu) .scrollTop (); var rY = map (x, 0, $ ), -17, 17); var rX = kart (y, 0, $ (dette) .height (), -17, 17);); funksjonsoversikt (x, in_min, in_max, out_min, out_max) (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);

Nå er våre kartlagte verdier rX og rY.

Det neste trinnet er å sette en CSS-regel for bilde element ved å bruke de mappede verdiene som rotasjonsverdier.

(funksjon ($) var kort = $ (".kort"); card.on ('mousemove', funksjon (e) var x = e.clientX - $ (this) .offset (). left + $ vinduet) .scrollLeft (); var y = e.clientY - $ (dette) .offset (). toppen + $ (vindu) .scrollTop (); var rY = map (x, 0, $ ), -17, 17), var rX = map (y, 0, $ (dette) .height (), -17, 17); $ (dette) .barn (". , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)";); funksjonsark (x, in_min, in_max, out_min, out_max) - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);

Her valgte vi barna til kort element som heter bilde, og sett deretter CSS-regelen for å rotere dette elementet rundt X- og Y-aksene ved rX og rY grader henholdsvis.

Du vil innse at kortelementene følger markøren i sine respektive perspektiver. Men når markøren er av kortelementene, beholder de retningene sine. Videre reagerer de på kortvarens tilstedeværelse over kortelementet. Så vi må også håndtere de tilfellene når musen kommer inn og forlater kortelementet.

For å håndtere disse problemene må vi bruke mouseenter og mouseleave arrangementer.

Når musen kommer inn i regionen av kort element, legger vi til en overgang CSS-regel til bilde element. Dette vil muliggjøre en jevn overgang for "blikket" av bilde element.

card.on ('mouseenter', funksjon () $ (dette) .barn (". bilde"). css (overgang: "alle" + 0,05 + "s" + "lineær"););

På samme måte må vi håndtere mouseleave begivenhet.

Her legger jeg også til en annen overgang CSS-regel med en annen timing, noe som gir en jevnere overgang til startposisjonen når musen forlater kort element. 

Jeg legger også til CSS-regelen for å nullstille rotasjonene til kort element.

css (overgang: "alle" + 0,2 + "s" + "lineær"); $ (dette) .cild ("transform", "rotateY (" + 0 + "deg)" + "" + "rotateX (" + 0 + "deg)";;);

Så vår siste jQuery-kode ser slik ut:

(funksjon ($) var kort = $ (".kort"); card.on ('mousemove', funksjon (e) var x = e.clientX - $ (this) .offset (). left + $ vinduet) .scrollLeft (); var y = e.clientY - $ (dette) .offset (). toppen + $ (vindu) .scrollTop (); var rY = map (x, 0, $ ), -17, 17), var rX = map (y, 0, $ (dette) .height (), -17, 17); $ (dette) .barn (". , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)";); card.on ('mouseenter', funksjon () $ (dette). css (overgang: "alle" + 0,05 + "s" + "lineær",);); card.on ('mouseleave', funksjon () $ (dette). css ("overgang:" alle "+ 0,2 +" s "+" lineær ",); $ (dette) .barn (". bilde "). css (" transform " rotateY ("+ 0 +" deg) "+" "+" rotateX ("+ 0 +" deg) ";); funksjonsoversikt (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);

Her er sluttresultatet. Jeg brukte også en annen sans-serif skrift på tekst element for å gjøre det ser bedre ut.

Konklusjon

Gjennom hele denne opplæringen lærte vi hvordan du bruker perspektivegenskapen og den nødvendige HTML-strukturen for å få det til å fungere skikkelig. Videre dekket vi hvordan du registrerer markørposisjonen når du svinger over et bestemt HTML-element.

På toppen av det brukte vi mousemove, mouseenter, og mouseleave Hendelser for å introdusere interaktivitet ved å legge til CSS-regler til HTML-elementer med jQuery.

Jeg håper du likte denne opplæringen og lærte noen nyttige metoder.