3D-painikkeen luominen Flip-animaatiot CSS n avulla
Käännä animaatioita ovat suosittuja CSS-tehosteita, jotka näyttävät sekä edessä että takana HTML-elementin avulla kääntämällä ne ylhäältä alas tai vasemmalta oikealle (ja päinvastoin). Ne ovat radia 2 dimensiossa, mutta ne ovat vieläkin viileämpiä, kun ne suoritetaan 3D-muodossa.
Tässä viestissä näytän sinulle, miten luoda yksinkertaisia 3D-painikkeita, ja lisää flip-animaatioita heille.
Näet alla olevan demon tuloksen, jos napsautat painikkeita, he suorittavat leimatun flip-animaation.
1. Luo 3D-painikkeen HTML-koodi
Voit luoda 3D-painikkeen (jossa on Top → Bottom flip) Me asetimme Lisäämme taustakuvia etu- ja takapainikkeisiin ja asetamme viileän lineaarisen kaltevuuden kuvien takana molemmille. Tässä on temppu, että CSS: ssä voit asettaa useita kuvia saman elementin taustakuvaksi, ja voit myös julistaa kaltevuudet taustakuviksi. Keski-kasvot, jotta peitä tila etu- ja takapuolen välissä keskimmäinen, me aseta keskitaso tasaiseksi 3D-tilan x-tason läpi käyttämällä Koska keski-kasvot asetettiin tasaisesti x-tason yli, sen y-akselin ylempi piste on 10px (puolet sen korkeudesta) alkuperäisestä. Niinpä, vetääksesi sen takaisin ylöspäin ja kohdistamalla sen yläosa kahteen muuhun painikkeeseen, lisäsin Käytin Toistaiseksi näet vain etupinnan näytöllä, kun x-taso on piilossa näkymästä, ja y-tasossa (näyttö) viimeinen laskeutunut kasvot olivat edessä. Käännä painiketta voit nähdä myös muut kasvot. Muunnos-tyylinen CSS-ominaisuus määrittää, näytetäänkö HTML-elementin lapsielementit tasaisina tai sijoitetaan 3D-tilaan. Alla olevassa koodinpätkässä Huomaa, että käytin Seuraavassa vaiheessa me kuitenkin vaihdamme sen Tässä vaiheessa 3D-painiketta ei ole vielä animoitu. Voimme tehdä tämän käyttämällä Tehdään, että painike pyörii vain hover-asennossa Huomaa, että Github-repossa, minä lisäsi jokaisen painikkeen valintaruudun antaaksesi animaation päälle .flipBtn kontti, joka toimii 3D-painikkeena, ja asetamme 3D-painikkeen .flipBtnWrapper kääre.
2. Perustyylien lisääminen CSS: n kanssa
leveys ja korkeus käärittimen ominaisuudet, painike ja painike näkyvät ja sijoittavat ne suhteellisen / absoluuttisen paikannustekniikan avulla. .flipBtnWrapper leveys: 200px; korkeus: 200px; asema: suhteellinen; .flipBtn, .flipBtn_face leveys: 100%; korkeus: 100%; asema: absoluuttinen;
3. Työnnä 3-nappia
.flipBtn_mid, annetaan a korkeus 20px, ja sama tila 20px luodaan etu- ja takapintojen välille. Viimeksi mainittu saavutetaan käyttämällä translateZ () CSS toimii siirtää elementin z-akselin suuntaan. Työnnä takapinta takaisin 10px: llä ja tuo etupuoli eteenpäin 10kpl. .flipBtn_front taustakuva: url ("kuva / css-3d-flip-button-animation-play.png"), lineaarinen gradientti (# FF6366 50%, # FEA56E); näkyvyys: piilotettu; muunnos: translateZ (10px); .flipBtn_back taustakuva: url ("kuva / css-3d-flip-button-animation-pause.png"), lineaarinen gradientti (# FF6366 50%, # FEA56E); taustaväri: sininen; muunnos: translateZ (-10px); .flipBtn_mid korkeus: 20px; taustaväri: # d5485a; muunnos: rotateX (90deg); alkuun: -10px; muunnos: rotateX (90deg); hallitse sitä tekee siitä kohtisuoran sekä etu- että takapainikkeeseen y-tasossa.alkuun: -10px myös sääntö.takapinta-näkyvyys CSS-ominaisuus etupinnalle, joten kun käännetään painike, etupinnan taakse ei näy.
4. Kierrä painiketta
transform-style: preserve-3d; sääntö antaa 3D-äänen painikkeellemme, kun taas muunnos: rotatexX () ominaisuus pyörii sitä x-akselin ympäri. .flipBtn transform-style: preserve-3d; muunnos: rotateX (-120deg);
-120deg pelkästään esittelyä varten, sillä näin on helpompaa kuvata, miten painike pyörii.
-180deg -näppäintä, jotta painike kääntyy kokonaan.5. Painikkeen animointi
siirtyminen omaisuutta. Käytämme muuttaa ensimmäisen arvon ominaisuus, koska tämä on ominaisuus, jota haluamme soveltaa siirtymävaiheeseen. Toinen arvo on kesto, 2s..flipBtn valitsin, käytä .flipBtnWrapper: hover .flipBtn. Kuten aiemmin mainittiin, myös muuttaa arvoa rotateX () että -180deg jotta painike kääntyy ympäri. .flipBtn siirtyminen: muunnos 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: tarkistettu pikemminkin kuin : hover, näin se käyttäytyy enemmän kuin todellinen painike. Mukana oli myös neljä erilaista painiketta, joissa on neljä kääntösuuntaa (alkuun → alhaalta, alhaalta → ylhäältä, oikealta → vasemmalta ja vasemmalta → oikealle), jotta voit helposti käyttää mitä tahansa.
