Kuidas luua 3D-nupp Flip Animatsioonid CSS-iga
Flip animatsioone on populaarsed CSS-efektid, mis näitavad nii ees kui ka taga HTML-elementi, keerates neid ülevalt alla või vasakult paremale (ja vastupidi). Nad on 2 mõõtmega rad, kuid need on 3D-i teostamisel isegi jahedamad.
Selles postituses näitan teile, kuidas seda teha luua lihtsaid 3D-nuppe, ja lisage flip-animatsioone neile.
Kui klõpsate nuppudele, näete allpool toodud demo tulemusi, nad täidavad märgistatud flip-animatsiooni.
1. 3D-nupu HTML-i loomine
3D-nupu loomiseks (üleval → Alumine klapp) pannakse kõigepealt kolm Me seadsime Lisame esi- ja tagakülje nuppudele taustapilte ning seadistame mõlema jaoks piltide taha külma lineaarse gradiendi. Siin on trikk, et CSS-is saab määrata sama elemendi taustpildiks mitu pilti ning samuti saate gradiente deklareerida taustapiltidena. Keskmine nägu, Et katma ruumi esi- ja tagakülgede vahel keskel, me asetage keskpind lame kasutades 3D-ruumi x-tasapinda Kuna keskmine nägu asetati lamedalt üle x-tasapinna, ulatub selle ülemine punkt y-teljel 10 px (poole kõrgusest) algupärast. Niisiis, et tõmmata see tagasi ja viia oma top kahe teise nupp nägu, lisasin Ma kasutasin seda Siiani näete ekraani esikülge ainult siis, kui x-tasapind on peidetud, ja y-tasapinnal (ekraanil) oli viimane ette nähtud nägu ees. Nupu pöörates Teil on võimalik näha ka teisi nägu. Transform-style CSS-i omadus määrab, kas HTML-elemendi lapse elemendid kuvatakse tasasena või paigutatakse 3D-ruumi. Allpool toodud koodilõigu puhul Pange tähele, et ma kasutasin Järgmisel sammul muudame aga selle Praegu ei ole meie 3D-nupp ikka veel animeeritud. Me saame seda teha kasutades Teeme nupp ainult pöörates hover, nii et selle asemel, et Pange tähele, et Github repos, I lisasid igale nupule märkeruudu animatsiooni sisselülitamiseks .flipBtn konteiner, mis toimib 3D-nupuna, ja paigutame 3D-nupu .flipBtnWrapper ümbris.
2. Põhistrateegiate lisamine CSS-iga
laius ja kõrgus ümbrise omadused, nupp ja nupp puutuvad kokku ja paigutavad need suhtelise / absoluutse positsioneerimismeetodi abil. .flipBtnWrapper laius: 200 px; kõrgus: 200 px; positsioon: suhteline; .flipBtn, .flipBtn_face laius: 100%; kõrgus: 100%; positsioon: absoluutne;
3. Treenige 3 nuppu
.flipBtn_mid, antakse a kõrgus 20px ja sama ruum 20px luuakse esi- ja tagakülgede vahel. Viimane saavutatakse kasutades translateZ () CSS toimib liigutab elementi z-teljel. Tõmme tagakülg 10tk võrra tagasi ja suuname esikülje 10tk võrra. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), lineaarne gradiend (# FF6366 50%, # FEA56E); nähtavus: varjatud; transform: translateZ (10px); .flipBtn_back background-image: url ("image / css-3d-flip-animatsioon-pause.png"), lineaarne gradiend (# FF6366 50%, # FEA56E); taustavärv: sinine; transform: translateZ (-10px); .flipBtn_mid kõrgus: 20 px; taustavärv: # d5485a; transform: rotateX (90deg); top: -10px; transform: rotateX (90deg); valitse see muudab selle risti nii esi- kui ka tagasi-nupule Y-tasapinnale.top: -10px reegel.nähtavust CSS-i omadus esipinnale, nii et kui nupp klapitakse, ei ole esikülje tagaosa nähtav.
4. Nupu pööramine
transform-style: preserve-3d; reegel annab meie nupule 3D helitugevuse, samal ajal kui teisendama: rotatexX () vara pöörab seda x-telje ümber. .flipBtn transform-style: preserve-3d; muundamine: rotateX (-120deg);
-120deg ainult demonstratsiooniks, kuna sel viisil on lihtsam illustreerida, kuidas nupp pöörleb.
-180 sekundit nupu täielikuks ümberlülitamiseks.5. Nupu animeerimine
üleminek vara. Me kasutame teisendada esimese väärtuse omadus, kuna see on omadus, mida soovime rakendada üleminekuefekti jaoks. Teine väärtus on kestus, 2s..flipBtn valija, kasutame .flipBtnWrapper: hover .flipBtn. Nagu varem mainitud, muutke ka väärtust rotateX () kuni -180 sekundit nupu ümberlülitamiseks. .flipBtn üleminek: transform 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: kontrollitud mitte :hõljuma, sel viisil käitub see pigem tõelise nupuna. Ka nelja erineva nuppuga nelja flip-suunaga (üleval → alt, alt → üleval, paremal → vasakul ja vasakul → paremal), et saaksite hõlpsasti kasutada kumbagi soovi.
