Provedba HTML5 Y CSS3 Ne samo da je pružio novi način standardizacije elemenata na stranici, dajući mogućnost uključivanja novih elemenata koji bi osigurali veći stupanj korisnosti u razvoju web aplikacija, već je također omogućio proširenje njihovih mogućnosti, ostavljajući tako na stranu jezici kao što su JavaScript za učinke i prijelaze zahvaljujući CSS3.
Očito postoje knjižnice JavaScript koji imaju nevjerojatne učinke i čine njihovu implementaciju prilično jednostavnom, no većinu vremena ta je funkcionalnost inkapsulirana, a mogućnosti izmjena uvelike su komplicirane.
Za ove slučajeve možemo koristiti CSS3 i uz malo rada možemo postići zaista nevjerojatne učinke i funkcionalnosti poput vrtuljka, nešto što je u prošlosti bilo moguće samo s JavaScript.
Izrada našeg vrtuljka
Prvo ćemo uključiti HTML kôd za naš rotirajući izbornik, koji će biti prilično jednostavan jer će uključivati samo uključivanje naše stilske tablice, oznake koja označava da će sve što je u njoj biti grafičkog sadržaja, poput fotografija, dijagrama ili u u ovom slučaju naš vrtuljak:
CSS3 vrtuljakVažno je istaknuti klase koje smo uvrstili u svoj div, jer će nam one omogućiti da izvedemo manipulacije u našem css -u. Nakon što to učinimo, nastavit ćemo s implementacijom naše stilske tablice, počevši prvo dajući našim elementima 3D izgled, za to ćemo koristiti svojstvo perspektiva Y transformirati:
.kartice {položaj: apsolutni; vrh: 50%; lijevo: 50%; širina: 190px; visina: 210px; marža: 0; -webkit-perspektiva: 800px; perspektiva: 800px; -webkit-transform: prevesti (-50%, -50%); -ms-transformirati: prevesti (-50%, -50%); preobraziti: prevesti (-50%, -50%); }S obzirom na to, uključit ćemo neke animacije koje će mu dati stil vrtilja koji radi prema pravilu koje ćemo definirati kasnije, također definiramo sekunde za koje želimo da izvrši prijelaze i postavljamo položaj za naše kartice unutar vrtuljak:
.cards__content {pozicija: apsolutna; širina: 100%; visina: 100%; -webkit-transform-style: sačuvati-3d; transformirati-stil: sačuvati-3d; -webkit-transform: translateZ (-182px) rotateY (0); transformirati: translateZ (-182px) rotateY (0); -webkit-animacija: vrtuljak 10 s beskonačni kubni-bezier (1, 0,015, 0,295, 1,225) prema naprijed; animacija: vrtuljak 10 s beskonačni kubni-bezier (1, 0,015, 0,295, 1,225) naprijed; } .cards__element {položaj: apsolutno; vrh: 0; lijevo: 0; širina: 190px; visina: 210px; obrub-radijus: 6px; }Sada ćemo zasebno raditi na kartici koristeći n-dijete, ovo za postavljanje različite boje pozadine za svaku od ovih stavki i rukovanje prijelazima za njih:
.cards__element: nth-child (1) {background: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transformirati: rotateY (0) translateZ (182px); } .cards__element: nth-child (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transformirati: rotateY (120deg) translateZ (182px); } .cards__element: nth-child (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transformirati: rotateY (240deg) translateZ (182px); }Na kraju smo postavili boju pozadine za tijelo i dodajemo naša pravila za riječ rotirajući, to radimo s ključni kadrovi koji je odgovoran za definiranje koda za animaciju:
tijelo {pozadina: # 6c4949; } @ -webkit-keyframes rotirajući izbornik {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformirati: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformirati: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformirati: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformirati: translateZ (-182px) rotateY (-360deg); }} @keyframes rotirajući izbornik {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformirati: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformirati: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformirati: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformirati: translateZ (-182px) rotateY (-360deg); }}S ovim spremnim, pogledajmo kako izgleda naš animirani vrtuljak u našem pregledniku:
Kao što vidimo, prilično je jednostavan, ali ispunjava svoju funkcionalnost i što je još bolje bez korištenja jednog retka koda u JavaScriptSvima ostaje samo uzeti primjer i malo eksperimentirati s njim, povećavajući njegovu veličinu, dodajući slike i mijenjajući stil vrtuljka, nešto što je potpuno moguće zbog načina na koji je izgrađen.
