Cum se creează animații cu buton 3D Flip cu CSS
Flip animații sunt efecte CSS populare care arată atât față cât și în spate a unui element HTML prin rotirea lor de sus în jos sau de la stânga la dreapta (și invers). Ele sunt rad în două dimensiuni, dar ele sunt chiar mai reci, atunci când sunt realizate în 3D.
În acest post, vă voi arăta cum să faceți creați butoane 3D simple, și adăugați animații flip lor.
Puteți vedea rezultatul pe demo-ul de mai jos, dacă faceți clic pe butoanele, acestea vor efectua animația flip etichetă.
1. Crearea butonului HTML pentru butonul 3D
Pentru a crea un buton 3D (cu partea de sus → partea inferioară a clapetei), mai întâi stivuim trei Am setat Adăugăm imagini de fundal pe fețele din față și din spate și stabilim un gradient liniar în spatele imaginilor pentru ambele. Trucul aici este că, în CSS, puteți seta mai multe imagini ca imagine de fundal pentru același element, și puteți declara, de asemenea, gradienții ca imagini de fundal. Fața de mijloc, La acoperă spațiul între fețele din față și din spate cu cele din mijloc, noi așezați fața mijlocie plană prin planul x al spațiului 3D folosind Deoarece fața de mijloc a fost pus plat peste x-plan, punctul său de top de pe axa y merge 10px (jumătatea înălțimii) față de poziția inițială. Deci, să-l trag înapoi și să-i aliniem topul cu celelalte două fețe ale butoanelor, am adăugat Am folosit Până în prezent, veți vedea numai fața frontală pe ecran, ca x-planul este ascuns de la vedere, iar pe y-plan (ecran) ultima fața stabilită a fost partea din față. Rotiți butonul veți putea vedea și celelalte fețe. Proprietatea CSS de tip transformare determină dacă elementele copilului unui element HTML sunt afișate plate sau poziționate în spațiul 3D. În fragmentul de cod de mai jos, Rețineți că am folosit Cu toate acestea, în următorul pas îl vom schimba În acest moment, butonul nostru 3D nu este încă animat. Putem face acest lucru folosind Să facem ca butonul să se rotească numai pe hover, deci în loc de Rețineți că în repo Github, eu a adăugat o casetă de selectare pentru fiecare buton pentru a declanșa animația .flipBtn container care va funcționa ca buton 3D și plasăm butonul 3D în .flipBtnWrapper învelitoare.
2. Adăugarea stilurilor de bază cu CSS
lăţime și înălţime proprietățile ambalajului, butonului și ale butonului, și poziționați-le folosind tehnica de poziționare relativă / absolută. .flipBtnWrapper lățime: 200px; înălțime: 200px; poziția: relativă; .flipBtn, .flipBtn_face lățime: 100%; înălțime: 100%; poziția: absolută;
3. Stilul fețelor cu 3 butoane
.flipBtn_mid, este dat a înălţime de 20px, iar același spațiu de 20px este creat între fețele din față și din spate. Obținem aceasta din urmă utilizând translateZ () Funcția CSS asta deplasează un element de-a lungul axei z. Împingeți fața din spate cu 10px și aduceți fața frontală înainte cu 10px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animație-play.png"), gradient liniar (# FF6366 50%, # FEA56E); backface-vizibilitate: ascuns; transformă: translateZ (10px); .FlipBtn_back background-image: url ( "image / css-3d-flip-buton-animație-pause.png"), liniar gradient (# FF6366 50%, # FEA56E); fundal-culoare: albastru; transformă: translateZ (-10px); .flipBtn_mid înălțime: 20px; fundal-culoare: # d5485a; transformare: rotateX (90deg); top: -10px; transformare: rotateX (90deg); spune asta o face perpendiculară la ambele butoane față și spate cu fața în planul y.top: -10px de asemenea.fata de jos vizibilitate Proprietatea CSS pentru fața frontală, așa că atunci când răsturnăm butonul, partea din spate a feței frontale nu va fi vizibilă.
4. Rotirea butonului
stilul transformării: păstrați-3d; rulează volumul 3D pentru butonul nostru, în timp ce transform: rotatexX () Proprietatea îl rotește în jurul axei x. .flipBtn transform-style: conserve-3d; transform: rotateX (-120deg);
-120deg numai în scopuri demonstrative, fiind astfel mai ușor de ilustrat modul în care funcționează rotirea butoanelor.
-180deg pentru a face butonul să se răstoarne complet.5. Animați butonul
tranziție proprietate. Noi folosim transforma proprietate pentru prima valoare, deoarece aceasta este proprietatea pe care dorim să aplicăm efectul de tranziție pentru. A doua valoare, este durata, 2s..flipBtn selector, hai să folosim .flipBtnWrapper: hover .flipBtn. După cum am menționat mai devreme, modificați și valoarea rotateX () la -180deg pentru a face butonul să se răstoarne. .flipBtn tranziție: transformare 2s; stilul transformării: păstrați-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: verificat mai degrabă decât pe :planare, astfel se comportă mai mult ca un buton real. Am inclus, de asemenea, patru butoane diferite cu patru direcții flip (Sus → Jos, Jos → Sus, Dreapta → Stânga și Stânga → Dreapta), astfel încât să puteți utiliza cu ușurință oricare doriți.
