Kaip sukurti 3D mygtuką Flip animacijos su CSS
Apversti animacijas yra populiarūs CSS efektai, rodantys priekyje ir gale iš HTML elemento, sukant juos iš viršaus į apačią arba iš kairės į dešinę (ir atvirkščiai). Jie yra dviejuose matmenyse, tačiau jie yra dar šaltesni, kai atliekami 3D.
Šiame pranešime parodysiu, kaip tai padaryti sukurti paprastus 3D mygtukus, ir pridėti flip animacijas jiems.
Jei matysite mygtukus, galite matyti žemiau pateiktą demonstraciją, jie atliks pažymėtą flip animaciją.
1. 3D mygtuko HTML sukūrimas
Norėdami sukurti 3D mygtuką (su viršutine → apačia apversti), pirmiausia sukrauname tris Nustatėme Į priekinius ir galinius mygtukus pridedame fono paveikslėlius, o už abiejų vaizdų nustatome vėsią linijinį gradientą. Čia gudrybės yra tai, kad CSS galite nustatyti kelis atvaizdus kaip to paties elemento fono paveikslėlį, taip pat galite nurodyti gradientus kaip fono paveikslėlius. Vidurinis veidas, Į padengti erdvę tarp priekinio ir galinio veido su viduriniu, mes uždėkite vidurinį veidą per 3D erdvės x plokštumą, naudodami Kadangi vidurinis veidas buvo plokščias per x plokštumą, jo viršutinis taškas y ašyje yra 10 px (pusė jos aukščio) nuo originalo. Taigi, norėdami jį atkurti ir suderinti viršų su dviem kitais mygtukais, pridėjau Aš naudoju Iki šiol ekrane matysite tik priekinį veidą, nes x-plokštuma yra paslėpta, o y-plokštumoje (ekrane) paskutinis nustatytas veidas buvo priekinis. Pasukant mygtuką galėsite matyti ir kitus veidus. Transformavimo stiliaus CSS ypatybė nustato, ar HTML elemento vaikų elementai rodomi plokšti, ar išdėstyti 3D erdvėje. Toliau pateiktame kodo fragmente Atkreipkite dėmesį, kad naudoju Tačiau kitame žingsnyje mes jį pakeisime Šiuo metu mūsų 3D mygtukas vis dar nėra animuotas. Tai galime padaryti naudodami Padarykime mygtuką tik pasukti į priekį, todėl vietoj Atkreipkite dėmesį, kad „Github“ repo, aš prie kiekvieno mygtuko pridėjo žymės langelį norint įjungti animaciją .flipBtn konteineris, kuris veiks kaip 3D mygtukas, o 3D mygtuką įdedame į .flipBtnWrapper vyniojamasis popierius.
2. Pagrindinių stilių pridėjimas su CSS
plotis ir aukštis apvyniojimo savybės, mygtukas ir mygtukas nukreipiami ir išdėstomi naudojant santykinę / absoliučią pozicionavimo techniką. .flipBtnWrapper plotis: 200px; aukštis: 200px; pozicija: santykinis; .flipBtn, .flipBtn_face plotis: 100%; aukštis: 100%; pozicija: absoliutus;
3. Stiliuokite 3 mygtukus
.flipBtn_mid, yra suteikta a aukštis 20px, o tarp priekinių ir galinių veidų sukuriama ta pati 20px erdvė. Pastarąjį pasiekiame naudojant translateZ () CSS veikia judina elementą palei z ašį. Nusileidžiame galinį veidą atgal 10px, o priekinį veidą nukreipiame 10 kartų. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), tiesinis gradientas (# FF6366 50%, # FEA56E); matomumas: paslėptas; transformuoti: translateZ (10px); .flipBtn_back background-image: url („image / css-3d-flip-button-animation-pause.png“), tiesinis gradientas (# FF6366 50%, # FEA56E); fono spalva: mėlyna; transformuoti: translateZ (-10px); .flipBtn_mid aukštis: 20px; fono spalva: # d5485a; transformuoti: rotateX (90deg); viršuje: -10px; transformuoti: rotateX (90deg); taisyklė daro jį statmeną į priekinį ir galinį mygtukus, nukreiptus į Y-plokštumą.viršuje: -10px taip pat.matomumas Priekinės dalies CSS savybė, taigi, kai paspaudžiame mygtuką, priekinės dalies nugara nebus matoma.
4. Pasukite mygtuką
transformavimo stilius: preserve-3d; taisyklė suteikia trimačio tūrio mūsų mygtukui, o transformuoti: rotatexX () nuosavybė sukasi aplink x ašį. .flipBtn transform-style: preserve-3d; transformuoti: rotateX (-120deg);
-120deg tik demonstravimo tikslais, nes taip lengviau iliustruoti, kaip veikia mygtuko pasukimas.
-180deg kad mygtukas būtų visiškai apverstas.5. Mygtuko animavimas
perėjimas nuosavybė. Mes naudojame transformuoti pirmos vertės nuosavybė, nes tai yra turtas, kurį norime taikyti pereinamojo laikotarpio efektui. Antroji vertė yra trukmė, 2s..flipBtn selektorius, naudokime .flipBtnWrapper: hover .flipBtn. Kaip minėta anksčiau, taip pat pakeiskite rotateX () į -180deg kad mygtukas būtų apverstas. .flipBtn perėjimas: transformuoti 2s; transformavimo stilius: preserve-3d; .flipBtnWrapper: hover .flipBtn transformuoti: rotateX (-180deg);
: patikrinta vietoj to : Pakimba, taip jis elgiasi labiau kaip tikrasis mygtukas. Aš taip pat įtraukiau keturis skirtingus mygtukus su keturiomis flip kryptimis (viršuje → apačioje, apačioje → viršuje, dešinėje → kairėn ir kairėn → dešinėn), kad galėtumėte lengvai naudotis bet kuriuo iš jų.
