Hvordan lage 3D-knappen Flip Animasjoner med CSS
Flip animasjoner er populære CSS effekter som viser både forsiden og baksiden 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 lager 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
.flipBtn
beholderen som vil fungere som 3D-knappen, og vi plasserer 3D-knappen i .flipBtnWrapper
.2. Legge til grunnleggende stiler med CSS
Vi stiller width
og height
til innpakningen, knappen og knappens ansikter og plasserer dem ved hjelp av den relative / absolutte posisjoneringsteknikken.
.flipBtnWrapper {bredde: 200px; høyde: 200px; stilling: relativ; } .flipBtn, .flipBtn_face {width: 100%; høyde: 100%; posisjon: absolutt; }
3. Still inn de 3 knappene
Vi legger til bakgrunnsbilder til 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.
.flipBtn_mid
, .flipBtn_mid
, er gitt en height
på 20px, og en samme plass på 20px er opprettet mellom front og bakside. Vi oppnår sistnevnte ved å bruke translateZ()
CSS-funksjonen som beveger et element langs z-aksen . Vi skyver baksiden av ryggen med 10px, og bringer frontflaten frem 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; }
For å dekke mellomrommet mellom forsiden og baksiden med midten, legger vi transform: rotateX(90deg);
flat over x-planet i 3D-rommet ved hjelp av transform: rotateX(90deg);
regelen som gjør den vinkelrett på både front- og baksiden av knappene på y-planet.
Siden midtflaten ble lagt flatt 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 også til top: -10px
regelen.
Jeg brukte CSS-egenskapen til baksiden av backface-visibility
til 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 å rotere knappen vil du også kunne se de andre ansiktene.
4. Rotering av knappenCSS-egenskapen for transformertype bestemmer om barnelementene i et HTML-element vises flatt, eller plassert i 3D-rommet. I kodestykket nedenfor, transform-style: preserve-3d;
regelen gir 3D-volum til knappen vår, mens egenskapen transform: rotatexX()
roterer den rundt x-aksen.
.flipBtn {transform-style: preserve-3d; transformere: rotateX (-120deg); }
Merk at jeg brukte -120deg
kun for demonstrasjonsformål, slik at det er lettere å illustrere hvordan -120deg
fungerer.
-180deg
å få knappen helt til å vende rundt.5. Animere knappen
På dette punktet er vår 3D-knapp fortsatt ikke animert. Vi kan gjøre dette ved å bruke transition
. Vi bruker transform
til den første verdien, da dette er eiendommen vi ønsker å bruke overgangseffekten for. Den andre verdien er varigheten, 2s
.
La oss bare få knappen til å rotere på svinger, så i stedet for .flipBtn
velgeren, la oss bruke .flipBtnWrapper:hover .flipBtn
. Som tidligere nevnt, endrer du også verdien av rotateX()
til -180deg
å få knappen til å vende rundt.
.flipBtn {overgang: transform 2s; transform-stil: preserve-3d; } .flipBtnWrapper: svever .flipBtn {transform: rotateX (-180deg); }
Legg merke til at i Github repo, la jeg til en avkrysningsboks til hver knapp for å brenne animasjonen på :checked
stedet for :hover
, slik fungerer det mer som en ekte knapp. Jeg har også inkludert fire forskjellige knapper med fire flip retninger (topp → 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
Photoshop Etiquette: En PS-arbeidsflytguide for designere
Adobe Photoshop er et kraftverk program som kan gjøre bilde redigering, UI design, digital maleri, og til og med vektor arbeid . Det tar mange år å mestre alle tastaturgenveiene og arbeidsflyten fordi det bare er så mye å lære.Photoshop Etiquette er en gratis online guide som kan hjelpe deg med å finne en produktiv arbeidsflyt .Denne
Opprett 3D Web Apps & Graphics med Whitestorm.js
Nettspill har kommet langt takket være WebGL og relaterte HTML5-APIer . Det mest fremtredende open source-biblioteket for 3D er Three.js .Mens Three.js er kraftig, er det også komplisert å lære fra bunnen av . I stedet kan du hente Whitestorm.js, en åpen kildekode ramme laget for 3D web grafikk. Den