Hogyan készítsünk 3D gombot Flip animációk CSS segítségével
Flip animációk népszerű CSS effektek, amelyek megmutatják mind az első, mind a hátsó egy HTML-elemből úgy, hogy felülről lefelé vagy balról jobbra (és fordítva) elforgatjuk őket. Két dimenzióban vannak rad, de még hűvösebbek, ha 3D-ben hajtják végre.
Ebben a bejegyzésben megmutatom, hogyan kell egyszerű 3D gombok létrehozása, és flip animációk hozzáadása nekik.
Az alábbi demó eredményét láthatja, ha rákattint a gombokra, akkor végrehajtják a címkézett flip animációt.
1. A 3D gomb HTML létrehozása
3D gomb létrehozásához (Top → Alsó flip) először háromat állítunk Megadjuk a Háttér-képeket adunk az elülső és hátsó gombokhoz, és mindkét oldalra hűvös lineáris gradienst állítunk be. Itt az a trükk, hogy a CSS-ben több képet állíthat be ugyanarra az elemre háttérképként, és a színátmeneteket háttérképként is deklarálhatja. A középső arc, Nak nek fedje le a helyet az első és hátsó arcok között a középső, mi helyezze a középső arcot laposra a 3D tér x-síkján keresztül a Mivel a középső felületet az x-sík mentén lefektettük, az y-tengely felső pontja 10x-nél (magasságának fele) az eredetitől kezdve. Szóval, hogy húzza vissza, és igazítsa a tetejét a másik két gombjához, hozzáadtam a Én használtam Eddig csak az első oldalt látja a képernyőn, mivel az x-sík elrejtve van, és az y-síkban (képernyőn) az utolsó lefektetett arc volt az első. A gomb elforgatásával látni fogja a többi arcot is. A transzformációs stílusú CSS tulajdonság határozza meg, hogy a HTML elem gyermekelemei síkban jelennek-e meg, vagy elhelyezhetők a 3D térben. Az alábbi kódrészletben a Ne feledje, hogy használtam A következő lépésben azonban megváltoztatjuk Ezen a ponton a 3D gombunk még mindig nem animált. Ezt a Tedd, hogy a gomb csak lebegjen, így ahelyett, hogy a Ne feledje, hogy a Github repóban, én jelölőnégyzetet adott hozzá minden gombhoz az animáció bekapcsolásához .flipBtn konténer, amely 3D gombként fog működni, és a 3D gombot a .flipBtnWrapper csomagolás.
2. Alapvető stílusok hozzáadása a CSS-hez
szélesség és magasság a burkolat tulajdonságai, a gomb és a gomb elé kerülnek, és a relatív / abszolút pozicionálási technikával helyezzük el őket. .flipBtnWrapper szélesség: 200px; magasság: 200px; pozíció: relatív; .flipBtn, .flipBtn_face szélesség: 100%; magasság: 100%; pozíció: abszolút;
3. Stílusosítsa a 3 gombot
.flipBtn_mid, kapott a magasság 20px-es, és ugyanez a 20px-os hely jön létre az első és a hátsó arcok között. Ez utóbbit a translateZ () A CSS működik egy elemet mozgat a z-tengely mentén. A hátsó arcot 10px-rel visszafelé toljuk, és az elülső oldalt 10px-el előre hozzuk. .flipBtn_front háttérkép: url ("image / css-3d-flip-button-animation-play.png"), lineáris gradiens (# FF6366 50%, # FEA56E); hátlap-láthatóság: rejtett; transzformáció: translateZ (10px); .flipBtn_back háttérkép: url ("image / css-3d-flip-button-animation-pause.png"), lineáris gradiens (# FF6366 50%, # FEA56E); háttérszín: kék; transzformáció: translateZ (-10px); .flipBtn_mid magasság: 20px; háttérszín: # d5485a; transzformálás: rotateX (90deg); top: -10px; transzformálás: rotateX (90deg); szabályozzuk merőleges mind az elülső, mind a hátsó gomb az Y-sík felé néz.top: -10px szabály.hátoldali Láthatósági CSS tulajdonság az elülső felületre, így amikor a gombot megfordítjuk, az elülső oldal hátulja nem lesz látható.
4. A gomb elforgatása
transzformációs stílus: preserve-3d; szabály megadja a 3D kötetet a gombunkhoz, míg a átalakítás: rotatexX () A tulajdonság az x-tengely körül forog. .flipBtn transform-style: preserve-3d; transzformálás: rotateX (-120deg);
-120deg kizárólag demonstrációs célokra, mivel így könnyebben illusztrálhatja, hogyan működik a gomb elforgatása.
-180 fokkal hogy a gombot teljesen megfordítsa.5. A gomb animálása
átmenet ingatlan. Használjuk a átalakít az első érték tulajdonsága, mivel ez az a tulajdonság, amelyre az átmeneti hatást kívánjuk alkalmazni. A második érték az időtartam, 2s..flipBtn szelektor, használjuk .flipBtnWrapper: hover .flipBtn. Amint azt korábban említettük, az értékét is megváltoztathatjuk rotateX () nak nek -180 fokkal hogy a gomb körül mozogjon. .flipBtn átmenet: transzformáció 2s; transzformációs stílus: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: ellenőrzött inkább a helyett :lebeg, így jobban viselkedik, mint egy igazi gomb. Négy különböző, négy flip irányba mutató gombot (Top → Alsó, Alsó → Felső, Jobb → Bal és Bal → Jobb) is szerepeltem, hogy könnyen használhassa a kívánt.
