Ako vytvoriť animáciu 3D tlačidiel pomocou CSS
Flip animácie sú populárne efekty CSS, ktoré sa zobrazujú tak na prednej aj zadnej strane prvku HTML tak, že ho otočíte zhora nadol, alebo zľava doprava (a naopak). Sú rad v dvoch rozmeroch, ale sú dokonca chladnejšie, keď sú vykonávané v 3D.
V tomto príspevku vám ukážem, ako na to vytvorte jednoduché 3D tlačidlá, a pridanie animácií flip k nim.
Výsledok môžete vidieť na nižšie uvedenom ukážke, ak kliknete na tlačidlá, vykonajú označenú animáciu flip.
1. Vytvorenie tlačidla HTML pre tlačidlo 3D
Ak chcete vytvoriť tlačidlo 3D (s horným a spodným flipom), najskôr stohujeme tri Nastavili sme Pridávame obrázky na pozadí tváre predného a zadného tlačidla a za obidvoma obrázkami nastavíme chladný lineárny gradient. Trik tu je, že v CSS môžete nastaviť viacero obrázkov ako obrázok na pozadí pre ten istý prvok a tiež môžete deklarovať prechody ako obrázky na pozadí. Stredná plocha, na pokrytie priestoru medzi prednou a zadnou stranou s strednou, my položte strednú plochu rovnú cez x-rovinu 3D priestoru pomocou Keďže stredná plocha bola rovinatá rovinou x, jej horný bod na osi y je 10px (polovica jej výšky) nadol od pôvodného. Takže, aby som ju vytiahol späť a vyrovnal jeho vrchol s ostatnými dvoma tlačidla tváre, som pridal Použil som Doteraz sa na obrazovke zobrazí len predná strana, pretože x-rovina je skrytá z pohľadu a na rovine y (obrazovke) bola posledná položená plocha predná časť. Otáčaním tlačidla budete môcť vidieť aj ostatné tváre. Vlastnosť CSS v transformačnom štýle určuje, či sú elementy HTML elementu zobrazené ploché alebo umiestnené v 3D priestore. V útržku kódu nižšie kliknite na položku Všimnite si, že som použil V ďalšom kroku to však zmeníme V tomto okamihu nie je naše tlačidlo 3D ešte animované. Môžeme to urobiť pomocou Dovoľte, aby sa tlačidlo stlačilo iba na vznášaní, takže miesto Upozorňujeme, že v repo Github som pridalo za každé tlačidlo začiarkavacie políčko aby sa spustila animácia .flipBtn kontajner, ktorý bude fungovať ako tlačidlo 3D, a umiestnime tlačidlo 3D do okna .flipBtnWrapper obálka.
2. Pridanie základných štýlov pomocou CSS
šírka a výška vlastnosti obalu, tlačidla a tlačidla smerom k sebe a umiestnite ich pomocou techniky relatívnej / absolútnej polohy. .flipBtnWrapper šírka: 200px; výška: 200px; pozícia: relatívna; .flipBtn, .flipBtn_face šírka: 100%; výška: 100%; poloha: absolútna;
3. Stlačte tvár 3 tlačidiel
.flipBtn_mid, je daný a výška 20px a medzi prednou a zadnou plochou sa vytvorí rovnaký priestor 20px. Dosiahli sme to pomocou translateZ () CSS funkcia, ktorá pohybuje prvkom pozdĺž osi z. Zadnú tvár zatlačíme o 10 pixlov a prednú tvár dopredu posunieme o 10 pixlov. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), lineárny gradient (# FF6366 50%, # FEA56E); spätná viditeľnosť: skrytá; transformovať: translateZ (10px); .flipBtn_back pozadie-obrázok: url ("image / css-3d-flip-button-animation-pause.png"), lineárny gradient (# FF6366 50%, # FEA56E); farba pozadia: modrá; transformovať: translateZ (-10px); .flipBtn_mid výška: 20px; farba pozadia: # d5485a; transformácia: rotateX (90deg); top: -10px; transformácia: rotateX (90deg); povedzte to robí to kolmo na obidve predné a zadné tlačidlá na rovine y.top: -10px pravidlo rovnako.backface-viditeľnosť Vlastnosť CSS pre prednú tvár, takže keď otočíme tlačidlo, zadná strana prednej strany nebude viditeľná.
4. Otočenie tlačidla
transformovať štýl: zachovať-3d; pravidlo dáva 3D zväzok nášho tlačidla, zatiaľ čo transformovať: rotatexX () Vlastnosť sa otáča okolo osi x. .flipBtn transform-štýl: zachovať-3d; transformácia: rotateX (-120deg);
-120deg výhradne na účely predvádzania, pretože je ľahšie zobraziť spôsob otáčania tlačidiel.
-180 stupňov aby sa tlačidlo úplne otočilo.5. Animácia tlačidla
prechod vlastnosť. Používame premeniť vlastnosť pre prvú hodnotu, pretože toto je vlastnosť, ktorú chceme použiť prechodový efekt pre. Druhá hodnota je dĺžka trvania, 2s..flipBtn volič, použite .flipBtnWrapper: hover .flipBtn. Ako už bolo spomenuté vyššie, tiež zmeniť hodnotu rotateX () na -180 stupňov aby sa tlačidlo otočilo. .flipBtn prechod: transformácia 2s; transformovať štýl: zachovať-3d; .flipBtnWrapper: hover.flipBtn transform: rotateX (-180deg);
: zaškrtnuté skôr než na :vznášať sa, týmto spôsobom sa správa viac ako skutočné tlačidlo. Taktiež som zaradil štyri rôzne tlačidlá so štyrmi smermi otočenia (Top → Bottom, Bottom → Top, Right → Left and Left → Right), takže môžete ľahko používať to, čo chcete.
