Kā izveidot 3D pogu Flip animācijas ar CSS
Flip animācijas ir populāri CSS efekti, kas parāda gan priekšā, gan aizmugurē no HTML elementa, pagriežot tos no augšas uz leju vai no kreisās uz labo pusi (un otrādi). Tie ir 2 dimensiju rad, bet tie ir vēl vēsāki, ja tos veic 3D režīmā.
Šajā ziņojumā es jums parādīšu, kā to darīt izveidot vienkāršas 3D pogas, un pievienot flip animācijas viņiem.
Ja jūs noklikšķināsiet uz pogām, jūs redzēsiet zemāk redzamo demo rezultātu, viņi izpildīs iezīmēto flip animāciju.
1. 3D pogas HTML izveide
Lai izveidotu 3D pogu (ar augšējo → apakšējo pārsegu), vispirms mēs sakārtojam trīs Mēs iestatām Mēs pievienojam fona attēlus priekšpuses un aizmugures pogām, un aiz abiem attēliem iestatām atdzist lineāru gradientu. Šeit triks ir tas, ka CSS varat iestatīt vairākus attēlus kā tā paša elementa fona attēlu, un jūs varat arī pasludināt gradientus kā fona attēlus. Vidējā seja, Uz aptver telpu starp priekšējo un aizmugures seju ar vidējo, mēs novietojiet vidējo seju plakanā izmantojot 3D telpas x plakni, izmantojot Tā kā vidējā seja tika likta plakana pāri x plaknei, tā augšējais punkts uz y ass iet 10px (puse no tā augstuma) no oriģināla. Tātad, lai to izvilktu atpakaļ un saskaņotu savu topu ar divām pārējām pogām, es pievienoju Es izmantoju Līdz šim uz ekrāna būs redzama tikai priekšējā seja, jo x plakne ir paslēpta no skata, un y-plaknē (ekrānā) pēdējais uzliktais seja bija priekšējais. Pagriežot pogu jūs varēsiet redzēt arī citas sejas. Transformācijas stila CSS īpašums nosaka, vai HTML elementa bērnu elementi tiek parādīti plakanā stāvoklī vai novietoti 3D telpā. Tālāk redzamajā koda fragmentā Ņemiet vērā, ka es to izmantoju Tomēr nākamajā solī mēs to mainīsim Šajā brīdī mūsu 3D poga joprojām nav animēta. To varam izdarīt, izmantojot Pieņemsim, ka poga rotēs tikai lidmašīnā, tā vietā, lai Ņemiet vērā, ka Github repo, es pievienoja katrai pogai izvēles rūtiņu lai aktivizētu animāciju .flipBtn konteiners, kas darbosies kā 3D poga, un mēs ievietojam 3D pogu .flipBtnWrapper iesaiņojums.
2. Pamata stilu pievienošana CSS
platums un augstums iesaiņojuma īpašības, poga un poga saskaras un novieto tos, izmantojot relatīvo / absolūto pozicionēšanas tehniku. .flipBtnWrapper platums: 200px; augstums: 200px; pozīcija: relatīvais; .flipBtn, .flipBtn_face platums: 100%; augstums: 100%; pozīcija: absolūta;
3. Stils 3 pogas saskaras
.flipBtn_mid, tiek dota a augstums 20px, un starp 20 un vairākkārtēju telpu tiek veidota viena un tā pati vieta. Mēs to panākam, izmantojot translateZ () CSS tas darbojas pārvieto elementu gar z-asi. Mēs virzām muguras seju atpakaļ ar 10px, un priekšpusi uz priekšu virzīsim 10px. .flipBtn_front fona attēls: url ("image / css-3d-flip-button-animation-play.png"), lineārs gradients (# FF6366 50%, # FEA56E); redzamība: slēpta; pārveidot: translateZ (10px); .flipBtn_back fona attēls: url ("image / css-3d-flip-button-animation-pause.png"), lineārā gradienta (# FF6366 50%, # FEA56E); fona krāsa: zila; transformēt: translateZ (-10px); .flipBtn_mid augstums: 20px; fona krāsa: # d5485a; transformēt: rotateX (90deg); tops: -10px; transformēt: rotateX (90deg); valdīt to padara to perpendikulāru uz priekšējo un aizmugurējo pusi uz Y plaknes.top: -10px valda arī.redzamība CSS īpašība priekšējai virsmai, tāpēc, kad mēs nospiežam pogu, priekšējās virsmas aizmugure nebūs redzama.
4. Pagriežot pogu
transform-style: preserve-3d; noteikums dod 3D pogu mūsu pogai, kamēr pārveidot: rotatexX () īpašums rotē ap x-asi. .flipBtn transform-style: preserve-3d; transformēt: rotateX (-120deg);
-120deg tikai demonstrācijas nolūkos, jo tādējādi ir vieglāk parādīt, kā darbojas pogas rotācija.
-180deg lai poga būtu pilnīgi apvērsta.5. Poga animēšana
pāreju īpašums. Mēs izmantojam pārveidot īpašums pirmajai vērtībai, jo tas ir īpašums, kuru mēs vēlamies piemērot pārejas efektam. Otrā vērtība ir ilgums, 2s..flipBtn selektors, izmantojam .flipBtnWrapper: hover .flipBtn. Kā minēts iepriekš, mainiet arī vērtības vērtību rotateX () uz -180deg lai poga būtu apvērsta. .flipBtn pāreja: transformēt 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transformēt: rotateX (-180deg);
: pārbaudīts nevis uz : lidināties, šādā veidā tā darbojas vairāk kā īsta poga. Es iekļāvu arī četras dažādas pogas ar četriem flip virzieniem (augšā → apakšā, apakšā → augšā, labajā pusē → pa kreisi un pa kreisi → pa labi), lai jūs varētu viegli izmantot vēlamo.
