Kako ustvariti 3D animacije gumbov Flip s CSS

s ena na drugo, dve za sprednji in zadnji strani gumba, in tretji za zapolnitev globine v sredini. Obrazi s tremi gumbi vstavimo v .flipBtn vsebnik, ki bo deloval kot gumb 3D, in gumb 3D vstavimo v .flipBtnWrapper ovoj.

2. Dodajanje osnovnih slogov s CSS

Nastavili smo premer in višine lastnosti ovojnice, gumba in gumbov, ter jih pozicionirajte s tehniko relativnega / absolutnega pozicioniranja.

 .flipBtnWrapper širina: 200px; višina: 200px; položaj: relativna;  .flipBtn, .flipBtn_face širina: 100%; višina: 100%; položaj: absolutno;  

3. Oblikujte 3 obraze gumba

Dodamo slike ozadja na sprednji in zadnji obraz gumbov in nastavimo hladen linearni gradient za slike za oba. Trik pri tem je, da lahko v CSS nastavite več slik kot ozadje za isti element, gradiente pa lahko označite tudi kot slike ozadja..

Srednji obraz, .flipBtn_mid, je dana a višine 20px, med sprednjo in zadnjo stranjo pa se ustvari enak razmik 20px. Slednje dosežemo z uporabo translateZ () Funkcija CSS, ki premakne element vzdolž osi z. Zadnjo stran potisnemo nazaj za 10 px in sprednjo stran obrnemo za 10 px.

 .flipBtn_front ozadje-slika: url ("image / css-3d-flip-button-animation-play.png"), linearno gradient (# FF6366 50%, # FEA56E); backface-vidljivost: skrita; transform: translateZ (10px);  .flipBtn_back ozadje-slika: url ("image / css-3d-flip-button-animation-pause.png"), linearno gradient (# FF6366 50%, # FEA56E); barva ozadja: modra; transform: translateZ (-10px);  .flipBtn_mid višina: 20px; barva ozadja: # d5485a; transform: rotateX (90deg); vrh: -10px; 

Za pokrijte prostor med sprednjo in zadnjo stranjo s srednjo, mi položite srednji obraz ravno čez x-ravnino 3D-prostora z uporabo transform: rotateX (90deg); pravilo je pravokotna tako na sprednji kot na zadnji strani obraza na y-ravnini.

Ker je bila srednja stran položena ravno čez x-ravnino, je njena zgornja točka na osi y 10 px (polovica njegove višine) navzdol iz originalne. Torej, da ga povlečete nazaj in poravnate vrh z dvema gumboma, sem dodal na vrh: -10px pravilo.

Uporabil sem vidnost ozadja Lastnost CSS za sprednjo stran, tako da, ko obrnemo gumb, zadnji del sprednje ploskve ne bo viden.

Do sedaj boste videli samo sprednjo stran na zaslonu, ker je x-ravnina skrita od pogleda, na y-ravnini (zaslon) pa je zadnji obraz, ki je bil določen, spredaj. Z vrtenjem gumba lahko boste videli tudi druge obraze.

4. Vrtenje gumba

Lastnost CSS v slogu transformacije določa, ali so podrejeni elementi elementa HTML prikazani ravno ali v 3D prostoru. V spodnjem odseku kode je transform-style: preserve-3d; pravilo daje 3D volumen na naš gumb, medtem ko transformiraj: rotatexX () lastnost vrti okoli osi x.

 .flipBtn style-transform: preserve-3d; transform: rotateX (-120deg);  

Upoštevajte, da sem uporabil -120deg samo za predstavitvene namene, saj je na ta način lažje prikazati, kako deluje vrtenje gumba.

Toda v naslednjem koraku ga bomo spremenili -180deg da se gumb popolnoma obrne.

5. Animirajte gumb

Na tej točki gumb 3D še vedno ni animiran. To lahko naredimo z uporabo prehod nepremičnine. Uporabljamo transform lastnost za prvo vrednost, ker je to lastnost, za katero želimo uporabiti učinek prehoda. Druga vrednost je trajanje, 2s.

Naredimo, da se gumb le obrne na hover, torej namesto na .flipBtn izbirnik, uporabimo .flipBtnWrapper: hover .flipBtn. Kot je bilo že omenjeno, spremenite tudi vrednost rotateX () do -180deg da se gumb obrne.

 .flipBtn prehod: transformacija 2s; transform-style: preserve-3d;  .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg); 

Upoštevajte, da v Github repo, I vsakemu gumbu dodal potrditveno polje za sprožitev animacije : označeno namesto na : hover, na ta način se obnaša bolj kot pravi gumb. Vključil sem tudi štiri različne gumbe s štirimi smeri (zgornji del → spodaj, spodaj → vrh, desno → levo in levo → desno), tako da lahko preprosto uporabite kateri koli.

• Prikaži predstavitev
• Prenesi vir