Hur man skapar 3D-knappen Flip Animation med CSS
Flip animationer är populära CSS-effekter som visar både fram och bak av ett HTML-element genom att vrida dem från toppen till botten eller från vänster till höger (och vice versa). De är rad i 2 dimensioner, men de är ännu svalare när de utförs i 3D.
I det här inlägget ska jag visa dig hur du ska skapa enkla 3D-knappar, och lägg till flip animationer till dem.
Du kan se resultatet på demo nedan, om du klickar på knapparna utför de märkta flip animationen.
1. Skapa HTML för 3D-knappen
För att skapa en 3D-knapp (med Top → Bottom flip), staplar vi först tre Vi satte Vi lägger till bakgrundsbilder på fram- och baksideknapparna och ställer en cool linjär gradient bakom bilderna för båda. Tricket här är att i CSS kan du ställa in flera bilder som bakgrundsbild för samma element, och du kan också deklarera gradienter som bakgrundsbilder. Mitt ansikte, Till täcka utrymmet mellan främre och bakre ansikten med mitten, vi lägg mittande ansikte platt tvärs över x-planet i 3D-rymden med hjälp av Eftersom mittytan låg platt över x-planet går toppunktet på y-axeln 10px (hälften av dess höjd) ner från originalet. Så, för att dra tillbaka den och anpassa sin topp med de två andra knappytorna, lade jag till Jag använde Hittills kommer du bara att se framsidan på skärmen, eftersom x-planet är gömd från vyn och på y-planet (skärm) var det sista ansiktet nedtill. Genom att vrida på knappen du kommer också att kunna se de andra ansiktena. CSS-egenskapen för transformationsstil bestämmer huruvida barnelementen i ett HTML-element visas platt eller placeras i 3D-rymden. I kodfältet nedan, visas Observera att jag använde Men i nästa steg kommer vi att ändra det till Vid denna tidpunkt är vår 3D-knapp fortfarande inte animerad. Vi kan göra detta genom att använda Låt oss göra att knappen bara roterar på svävar, så istället för Observera att i Github repo, jag lade en kryssruta till varje knapp för att elda animationen på .flipBtn behållare som kommer att fungera som 3D-knappen, och vi placerar 3D-knappen i .flipBtnWrapper omslag.
2. Lägga till grundläggande stilar med CSS
bredd och höjd egenskaper på omslaget, knappen och knappytorna och placera dem med hjälp av relativ / absolut positioneringsteknik. .flipBtnWrapper bredd: 200px; höjd: 200px; position: relativ; .flipBtn, .flipBtn_face width: 100%; höjd: 100%; position: absolut;
3. Stil in de 3 knapparna
.flipBtn_mid, ges a höjd av 20px, och ett samma utrymme på 20px skapas mellan fram- och baksidorna. Vi uppnår det senare genom att använda translateZ () CSS funktion som rör ett element längs z-axeln. Vi trycker tillbaka ansiktet tillbaka med 10px, och ta framsidan framåt med 10px. .flipBtn_front bakgrundsbild: url ("bild / css-3d-flip-button-animation-play.png"), linjär gradient (# FF6366 50%, # FEA56E); backface-visibility: hidden; transformera: translateZ (10px); .flipBtn_back background-image: url ("bild / css-3d-flip-button-animation-pause.png"), linjär gradient (# FF6366 50%, # FEA56E); bakgrundsfärg: blå; transformera: translateZ (-10px); . flipBtn_mid höjd: 20px; bakgrundsfärg: # d5485a; transformera: rotateX (90deg); topp: -10px; transformera: rotateX (90deg); bestämma det gör den vinkelrätt till både främre och bakre knappytor på y-planet.topp: -10px regel också.backface-synlighet CSS-egenskapen för framsidan, så när vi vrider på knappen kommer baksidan av framsidan inte att synas.
4. Rotera knappen
transform-stil: bevara-3d; regel ger 3D-volymen till vår knapp, medan transformera: rotatexX () egenskapen roterar den runt x-axeln. .flipBtn transform-style: preserve-3d; transformera: rotateX (-120deg);
-120deg endast för demonstration, så det är lättare att illustrera hur knapprotationen fungerar.
-180 grader för att få knappen helt att vända runt.5. Animering av knappen
övergång fast egendom. Vi använder omvandla egendom för det första värdet, eftersom det här är egenskapen som vi vill tillämpa övergångseffekten för. Det andra värdet är varaktigheten, 2s..flipBtn väljare, låt oss använda .flipBtnWrapper: svep. flipBtn. Som tidigare nämnts ändras också värdet av rotateX () till -180 grader för att göra knappen flip runt. .flipBtn övergång: transform 2s; transform-stil: bevara-3d; .flipBtnWrapper: sväva .flipBtn transform: rotateX (-180deg);
:kontrollerade snarare än på :sväva, På så sätt beter sig det som en riktig knapp. Jag har också inkluderat fyra olika knappar med fyra flip-riktningar (Top → Bottom, Bottom → Top, Right → Vänster och Vänster → Höger), så att du enkelt kan använda det du vill.
