Sådan oprettes 3D Button Flip Animationer med CSS
Flip animationer er populære CSS effekter, der viser både for og bag af et HTML-element ved at dreje dem fra toppen til bunden eller fra venstre til højre (og omvendt). De er rad i 2 dimensioner, men de er endnu køligere, når de udføres i 3D.
I dette indlæg vil jeg vise dig, hvordan du skal lav enkle 3D-knapper, og tilføj flip animationer til dem.
Du kan se resultatet på demoen nedenfor, hvis du klikker på knapperne, udfører de den mærket flip animation.
1. Oprettelse af HTML til 3D-knappen
For at oprette en 3D-knap (med top → nederste flip), stak vi først tre Vi sætter Vi tilføjer baggrundsbilleder til forsiden og bagsiden af knapperne og sætter en kølig lineær gradient bag billederne for begge dele. Tricket her er, at i CSS kan du indstille flere billeder som baggrundsbillede for det samme element, og du kan også erklære gradienter som baggrundsbilleder. Mellemfladen, Til dække rummet mellem forsiden og bagsiden med midten, vi læg mellemfladen fladt på tværs af x-planet i 3D-rummet ved hjælp af Da midterfladen blev lagt fladt over x-planet, går dens øverste punkt på y-aksen 10 px (halvdelen af dens højde) ned fra originalen. Så for at trække det op igen og justere sin top med de to andre knapflader, tilføjede jeg Jeg brugte Hidtil vil du kun se frontfladen på skærmen, da x-flyet er skjult fra visning, og på y-flyet (skærmen) var det sidste ansigt lagt ned foran. Ved at dreje knappen du vil også kunne se de andre ansigter. CSS-egenskaben for transformationstype bestemmer, om barnelementerne i et HTML-element vises fladt eller placeret i 3D-rummet. I kodestykket nedenfor, vises Bemærk at jeg brugte Men i det næste trin vil vi ændre det til På dette tidspunkt er vores 3D-knap stadig ikke animeret. Det kan vi gøre ved at bruge Lad os få knappen til kun at dreje på svæver, så i stedet for Bemærk at i Github repo, jeg tilføjede en afkrydsningsfelt til hver knap for at brand animationen på .flipBtn container som vil fungere som 3D-knappen, og vi placerer 3D-knappen i .flipBtnWrapper indpakning.
2. Tilføjelse af grundlæggende stilarter med CSS
bredde og højde indpakningens egenskaber, knappen og knappens ansigter og positioner dem ved hjælp af den relative / absolutte positioneringsteknik. .flipBtnWrapper bredde: 200px; højde: 200px; stilling: relativ; .flipBtn, .flipBtn_face width: 100%; højde: 100%; position: absolut;
3. Styl 3 knapfladerne
.flipBtn_mid, gives a højde af 20px, og et samme rum på 20px er skabt mellem forsiden og bagsiden. Vi opnår sidstnævnte ved at bruge translateZ () CSS funktion det flytter et element langs z-aksen. Vi skubber bagsiden tilbage med 10px, og sæt forsiden opad med 10px. .flipBtn_front baggrundsbillede: url ("image / css-3d-flip-button-animation-play.png"), lineær gradient (# FF6366 50%, # FEA56E); backface-synlighed: skjult; transformere: translateZ (10px); .flipBtn_back baggrundsbillede: url ("image / css-3d-flip-button-animation-pause.png"), lineær gradient (# FF6366 50%, # FEA56E); baggrundsfarve: blå; transformere: translateZ (-10px); .flipBtn_mid højde: 20px; baggrundsfarve: # d5485a; transformere: rotateX (90deg); top: -10px; transformere: rotateX (90deg); regere det gør den vinkelret til både front- og bagknapfladerne på y-planet.top: -10px regel også.backface-synlighed CSS-egenskab til forsiden, så når vi klapper på knappen, vil bagsiden af forsiden ikke blive synlig.
4. Drej knappen
transform-stil: preserve-3d; regel giver 3D-lydstyrke til vores knap, mens transformere: rotatexX () Egenskaben roterer den omkring x-aksen. .flipBtn transform-style: preserve-3d; transformere: rotateX (-120deg);
-120deg udelukkende til demonstrationsformål, som på denne måde er det nemmere at illustrere, hvordan knaprotationen fungerer.
-180deg for at gøre knappen helt vende rundt.5. Animering af knappen
overgang ejendom. Vi bruger omdanne ejendom til den første værdi, da dette er den ejendom, vi ønsker at anvende overgangseffekten til. Den anden værdi er varigheden, 2s..flipBtn vælger, lad os bruge .flipBtnWrapper: svævefløjte .flipBtn. Som tidligere nævnt ændres også værdien af rotateX () til -180deg for at gøre knappen flip rundt. .flipBtn overgang: transform 2s; transform-stil: preserve-3d; .flipBtnWrapper: svinge .flipBtn transform: rotateX (-180deg);
: kontrolleret snarere end på : hover, på denne måde virker det mere som en rigtig knap. Jeg har også inkluderet fire forskellige knapper med fire flip retninger (øverste → nederste, nederste → øverste, højre → venstre og venstre → højre), så du nemt kan bruge alt efter hvad du vil.
