Hvordan lage 3D-knappen Flip Animasjoner med CSS

Flip animasjoner er populære CSS effekter som viser både foran og bak av et HTML-element ved å skru dem fra topp til bunn, eller fra venstre til høyre (og omvendt). De er rad i 2 dimensjoner, men de er enda kjøligere når de utføres i 3D.

I dette innlegget vil jeg vise deg hvordan du skal lag enkle 3D-knapper, og legg til flip animasjoner til dem.

Du kan se resultatet på demoen under, hvis du klikker på knappene, vil de utføre den merkede flip animasjonen.

1. Opprette HTML for 3D-knappen

For å lage en 3D-knapp (med topp → Bunnflip), stabler vi først tre

s på hverandre, to for forsiden og baksiden av knappen, og en tredje for å fylle dybden i midten. Vi setter de tre knappene i .flipBtn container som vil fungere som 3D-knappen, og vi plasserer 3D-knappen i .flipBtnWrapper wrapper.

2. Legge til grunnleggende stiler med CSS

Vi satte bredde og høyde egenskapene til omslaget, knappen og knappens ansikter, og plasser dem ved hjelp av relativ / absolutt posisjoneringsteknikk.

 .flipBtnWrapper bredde: 200px; høyde: 200px; posisjon: relativ;  .flipBtn, .flipBtn_face width: 100%; høyde: 100%; posisjon: absolutt;

3. Still inn de 3 knappene

Vi legger til bakgrunnsbilder på forsiden og baksiden av knappene, og setter en kul lineær gradient bak bildene for begge. Tricket her er at i CSS kan du sette flere bilder som bakgrunnsbilde for det samme elementet, og du kan også deklarere gradienter som bakgrunnsbilder.

Midtflaten, .flipBtn_mid, er gitt a høyde av 20px, og en samme plass på 20px er opprettet mellom front og bakside. Vi oppnår sistnevnte ved å bruke translateZ () CSS funksjon som beveger et element langs z-aksen. Vi skyver baksiden bakover med 10px, og bringer forsiden fremover med 10px.

 .flipBtn_front bakgrunnsbilde: url ("image / css-3d-flip-button-animation-play.png"), lineær gradient (# FF6366 50%, # FEA56E); backface-synlighet: skjult; transformere: translateZ (10px);  .flipBtn_back bakgrunnsbilde: url ("image / css-3d-flip-button-animation-pause.png"), lineær gradient (# FF6366 50%, # FEA56E); bakgrunnsfarge: blå; transformere: translateZ (-10px);  .flipBtn_mid høyde: 20px; bakgrunnsfarge: # d5485a; transformere: rotateX (90deg); topp: -10px;

Til dekke plassen mellom forsiden og ryggen vender med den midterste, vi legg midtflaten flat over x-planet i 3D-rommet ved hjelp av transformere: rotateX (90deg); regjere det gjør det vinkelrett til både front og bak knappene på y-planet.

Siden midtflaten ble lagt flat over x-planet, går toppunktet på y-aksen 10px (halvparten av høyden) ned fra originalen. Så, for å trekke den opp igjen og justere toppen med de to andre knappene, la jeg til topp: -10px regelen også.

Jeg brukte backface-synlighet CSS-egenskapen for forsiden, så når vi klapper på knappen, vil baksiden av forsiden ikke bli synlig.

Så langt vil du bare se frontflaten på skjermen, da x-flyet er skjult for visning, og på y-flyet (skjermen) var det siste ansiktet lagt ned foran. Ved å dreie knappen Du vil også kunne se de andre ansiktene.

4. Rotering av knappen

CSS-egenskapen for transformertype avgjør om barnelementene i et HTML-element vises flatt, eller plassert i 3D-rommet. I kodestykket under, er transform-stil: preserve-3d; regelen gir 3D-volum til vår knapp, mens transformere: rotatexX () Egenskapen roterer den rundt x-aksen.

 .flipBtn transform-style: preserve-3d; transformere: rotateX (-120deg);

Merk at jeg brukte -120deg bare for demonstrasjonsformål, slik at det er lettere å illustrere hvordan knapprotasjonen fungerer.

Men i neste trinn vil vi bytte den til -180 grader for å gjøre knappen helt vende rundt.

5. Animere knappen

På dette punktet er vår 3D-knapp fortsatt ikke animert. Vi kan gjøre dette ved å bruke overgang eiendom. Vi bruker forvandle eiendom for den første verdien, da dette er eiendommen vi ønsker å bruke overgangseffekten for. Den andre verdien er varigheten, 2s.

La oss få knappen bare å rotere på svinger, så i stedet for .flipBtn velger, la oss bruke .flipBtnWrapper: svever. flipBtn. Som tidligere nevnt, endrer du også verdien av rotateX () til -180 grader å la knappen vende rundt.

 .flipBtn overgang: transform 2s; transform-stil: preserve-3d;  .flipBtnWrapper: svever .flipBtn transform: rotateX (-180deg);

Legg merke til at i Github repo, jeg lagt til en avkrysningsboks til hver knapp for å brann animasjonen på :sjekket heller enn på :sveve, denne måten oppfører seg mer som en ekte knapp. Jeg har også inkludert fire forskjellige knapper med fire flip retninger (øverst → nederst, nederst → øverst, høyre → venstre og venstre → høyre), slik at du enkelt kan bruke det du vil ha.

Se demo
Last ned kilde