Kako stvoriti 3D gumb Flip animacije s CSS
Flip animacije su popularni CSS efekti koji se prikazuju i na prednjoj i na stražnjoj strani HTML elementa okrećući ih od vrha prema dnu ili slijeva udesno (i obrnuto). Oni su rad u 2 dimenzije, ali su čak i hladnije kada se izvodi u 3D.
U ovom postu, pokazat ću vam kako stvoriti jednostavne 3D gumbe, i dodajte animacije za okretanje njima.
Možete vidjeti rezultat na demo ispod, ako kliknete na gumbe, oni će obaviti označenu flip animaciju.
1. Izrada HTML-a za 3D gumb
Da biste stvorili 3D gumb (s Top → Bottom flip), najprije skupimo tri Postavili smo Na prednja i stražnja gumba dodamo pozadinske slike i postavljamo hladni linearni gradijent iza slika za oba. Trik je u tome što u CSS-u možete postaviti više slika kao pozadinsku sliku za isti element, a gradijente možete deklarirati i kao pozadinske slike.. Srednje lice, Do pokriti prostor između prednje i stražnje strane s srednjom, mi položi srednju stranu ravna preko x-ravnine 3D prostora pomoću Budući da je srednja strana položena ravno preko x-ravnine, njezina gornja točka na y-osi ide 10 px (polovica svoje visine) prema dolje od izvorne. Dakle, da ga povučete natrag gore i poravnajte svoj vrh s dva druga lica gumbima, dodao sam Koristio sam Do sada ćete vidjeti samo prednje lice na zaslonu, budući da je x-ravnina skrivena od pogleda, a na y-ravnini (ekranu) zadnje postavljeno lice je bilo prednje. Okretanjem gumba moći ćete vidjeti i druga lica. Svojstvo CSS-a u stilu transformacije određuje jesu li podređeni elementi HTML elementa prikazani ravni ili pozicionirani u 3D prostoru. U isječku koda u nastavku, Zapamtite da sam koristio Međutim, u sljedećem koraku ćemo ga promijeniti U ovom trenutku, naš 3D gumb još uvijek nije animiran. To možemo učiniti pomoću Učinimo da se gumb rotira samo na lebdenju, pa umjesto na Imajte na umu da u Github repo, ja svakom gumbu dodao je potvrdni okvir kako bi uključili animaciju .flipBtn spremnik koji će funkcionirati kao 3D gumb, a 3D gumb stavljamo u .flipBtnWrapper omot.
2. Dodavanje osnovnih stilova CSS-om
širina i visina svojstva omotača, gumba i gumba, te ih pozicionirajte pomoću tehnike relativnog / apsolutnog pozicioniranja. .flipBtnWrapper širina: 200px; visina: 200px; pozicija: relativna; .flipBtn, .flipBtn_face širina: 100%; visina: 100%; položaj: apsolutni;
3. Formirajte lica s 3 gumba
.flipBtn_mid, daje se a visina od 20px, a isti prostor od 20px se stvara između prednje i stražnje strane. Ovo postižemo pomoću translateZ () CSS funkcija koja pomiče element duž z-osi. Gurnemo stražnju stranu za 10px, a prednju stranu pomaknemo za 10px. .flipBtn_front pozadina-slika: url ("image / css-3d-flip-button-animation-play.png"), linearni gradijent (# FF6366 50%, # FEA56E); backface-vidljivost: skriveno; transformacija: translateZ (10px); .flipBtn_back pozadina-slika: url ("image / css-3d-flip-button-animation-pause.png"), linearni gradijent (# FF6366 50%, # FEA56E); boja pozadine: plava; transformacija: translateZ (-10px); .flipBtn_mid visina: 20px; boja pozadine: # d5485a; transformacija: rotateX (90deg); vrh: -10px; transformacija: rotateX (90deg); vladati čini ga okomitim na prednje i stražnje gumbe lica na y-ravnini.gore: -10px pravilo.backface-vidljivost CSS svojstvo za prednje lice, tako da kada okrenemo gumb, stražnja strana prednjeg lica neće biti vidljiva.
4. Okretanjem gumba
stilu transformacije: preserve-3d; pravilo daje 3D volumen našem gumbu, dok je transformacija: rotatexX () svojstvo rotira oko osi x. .flipBtn transform-style: preserve-3d; transformacija: rotateX (-120deg);
-120deg isključivo u demonstracijske svrhe, jer je na taj način lakše ilustrirati kako funkcionira rotacija gumba.
-180deg kako bi se gumb potpuno okrenuo.5. Animiranje gumba
tranzicija nekretnine. Mi koristimo transformirati svojstvo za prvu vrijednost, jer je to svojstvo za koje želimo primijeniti učinak prijelaza. Druga vrijednost je trajanje, 2s..flipBtn selektor, upotrijebimo .flipBtnWrapper: lebdi .flipBtn. Kao što je ranije spomenuto, također promijenite vrijednost rotateX () do -180deg kako bi se gumb okrenuo. .flipBtn transition: transform 2s; stilu transformacije: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
Isprobali radije nego na : hover, na taj se način ponaša više kao pravi gumb. Također sam uključio četiri različita gumba s četiri smjera okretanja (Gornji dio → Donji, Donji → Gornji, Desni → Lijevo i Lijevo → Desno), tako da možete lako koristiti ono što želite.
