Ndonjëherë zgjidhjet e pazakonta të projektimit e detyrojnë projektuesin e paraqitjes të përdorë të njëjtën gjë zgjidhje jo standarde kur vendosni tekst. Për shembull, rrotulloni një nga elementet e tekstit në një kënd të caktuar. Ky artikull do të diskutojë disa zgjidhje të thjeshta këtë detyrë.

Zëvendësimi i tekstit me një imazh

Zgjidhja më primitive për këtë problem do të ishte përdorimi i një fotografie. Me mjete jo të panjohura për të gjithë Programet e Adobe Teksti i Photoshop-it Rrotullohet lehtësisht në çdo kënd. Siç mund ta imagjinoni, nuk duhet shumë inteligjencë për të përdorur këtë metodë.

Në disa situata është e pamundur të përdoret një metodë tjetër, por në shumicën e rasteve ato largohen nga përdorimi i fotografive. Kjo shpjegohet nga një sërë disavantazhesh që shoqërojnë këtë teknikë:

• Pamundësia e përdoruesit për të kopjuar informacionin në kontejnerin e specifikuar;
• Kompleksiteti i procedurës për të bërë korrigjime në pjesa e tekstit element;
• Rritet trafiku në serverin e faqes;
• Rritja e kërkesave për serverin kur përditësohet një burim.

Përkundër faktit se ka kaq shumë aspekte negative të përdorimit të fotografive, metoda ka disa efekte pozitive.

• Pajtueshmëria me shfletues- nuk ka probleme kur shfaqet në shfletues të ndryshëm.
• Aftësi e lartë në pozicionimin e imazhit.

Ende në në këtë rast anët negative mbipeshojnë. Unë ju këshilloj t'i drejtoheni zgjidhjeve të tjera.

Përdorimi i vetive të transformimit CSS

Kostoja e përdorimit të kësaj metode është shumë më e lartë në krahasim me imazhin. Dallim domethënës krijon fleksibilitet në redaktimin e tekstit dhe aftësinë për të zgjedhur dhe kopjuar përmbajtjen e një kontejneri të rrotulluar. Pengesa kryesore për zhvillimin e kësaj teknike ishte pajtueshmëria me shfletuesit. Tani kemi arritur rezultate të mira në këtë front, gjë që na lejon të përdorim pronën e transformimit pa asnjë problem.

Thelbi i mënyrës se si funksionon prona është ndarja e aeroplanit me shkallë. Si rezultat, kur specifikohet një kënd i caktuar, ena do të marrë pozicionin përkatës. Vlen të theksohet se prona në formë e pastër nuk aplikohet. Ai duhet të shoqërohet nga vetitë e shitësit, të cilat, në fakt, ofrojnë një nivel të lartë të përputhshmërisë me shfletuesit.

Është e rëndësishme të theksohet se nuk është teksti brenda bllokut ai që ndryshon pozicionin, por vetë blloku, tek i cili bëhet aksesi i vetive nëpërmjet një përzgjedhësi të klasës ose në ndonjë mënyrë tjetër. Më poshtë është një shembull i përdorimit të metodës

Enë ( - moz- transformim: rrotullim (- 45 gradë) ; - ueb-kit- transformim: rrotullo (- 45 gradë) ; - o- transformim: rrotullo (- 45 gradë) ; - ms- transformim: rrotullo (- 45 gradë) ; transformim: rrotullo (- 45 gradë) - 45 gradë) ;)

Si rezultat, marrim diçka të tillë:

I referohem kësaj vetie, dizajni do të shfaqet pa probleme në Firefox, Opera, Internet Explorer dhe shfletues të tjerë të ueb-kit.

Trajtimi përmes Javascript

Thelbi i procesit është plotësisht i ngjashëm me metodën e diskutuar më parë. Për ta zbatuar atë, ju duhet një minimum njohuri për kodin js, matematikë dhe një kuptim të filtrit Matrix.

Javascript

var deg2radians = Math. PI * 2 / 360, gradë = - 4; rad = deg * deg2radians, costeta = Mat. cos (rad) , sintheta = Math. sin(rad); jQuery(".rotatedBlock") . css((filtri: "progid:DXImageTransform.Microsoft.Matrix (M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="auto zgjerim", enabled=true)"} ) ;

Si rezultat, ne marrim të njëjtën pamje në shfletues si kur përdorim vetinë e transformimit.

Edhe nëse nuk kuptoni një simbol të vetëm në këtë hyrje, nuk ka rëndësi. Për të punuar me këtë kod, mjafton të kuptoni se vlera e këndit është shkruar në rreshtin e dytë, ju e zëvendësoni atë për veten tuaj dhe thjesht kopjoni pjesën tjetër pa ndryshime.

Karakteristikat e përdorimit të Javascript dhe CSS

Këto dy metoda kanë disa dallime të vogla në parimin e funksionimit, të cilat janë shumë të rëndësishme për t'u njohur dhe marrë parasysh.

Dallimi i parë bazohet në ndryshimin në lartësinë e bllokut dhe pozicionin e tij. Rruga për të dalë nga kjo situatë është mjaft e thjeshtë dhe është përdorimi i vetive të marzhit. Duke indentuar ne vendosim bllokun në nivelin e kërkuar dhe pozicioni. Mospërputhjet e tjera të pozicionimit mund të eliminohen duke i caktuar një vlerë absolute pozicionimi bllokut, i cili gjithashtu funksionon në mënyrë efektive.

Një qasje më komplekse dhe e personalizuar është përdorimi i vetive transformimi-origjina. Thelbi i kësaj teknike do të përshkruhet në artikujt vijues.

Dallimi tjetër qëndron në thelbin e vetë kthesës. Kur përdorni kodin js, pika e rrotullimit është në skajin e bllokut. Në metodën e dytë, kjo pikë ndodhet në qendër të elementit. Për ta kuptuar më lehtë, shikoni foton më poshtë

• Përkthimi

Përshëndetje, i dashur mik habra! Ka shumë shembuj në internet të përdorimeve të shkëlqyera të transformimeve dhe tranzicioneve në CSS3. Në këtë artikull, ne do të shqyrtojmë bazat e CSS3 dhe do të mësojmë se si të krijojmë diçka të tillë. Ky tutorial do të jetë i dobishëm për ata që sapo kanë filluar të njihen me CSS3. Le të fillojmë!

Sistemi i koordinatave

Për ta bërë më të lehtë të kuptojmë se si funksionon lëvizja e një objekti, ne do të punojmë në një sistem koordinativ.


Sidoqoftë, sistemi ynë i koordinatave ka një veçori: boshti Y drejtohet në drejtim të kundërt se zakonisht. Pse? Fakti është se HTML dhe CSS (së bashku me, për shembull, ActionScript) përdorin një sistem koordinativ të kundërt, pasi faqja e internetit fillon nga e majta. këndi i sipërm dhe zbret.
Shënimi: Ne do të supozojmë se ju jeni tashmë të njohur me Struktura HTML dhe CSS. Do të kapërcej shpjegimet se si të konfigurohet skedar CSS, si vendosen fotot etj. Ne do të fokusohemi në animimin e imazheve. Nëse nuk jeni të sigurt se cilat janë aftësitë tuaja nivel të lartë, atëherë ju rekomandojmë t'i hidhni një sy kursit të mësimeve "HTML dhe CSS në 30 ditë" (falas dhe në vazhdim gjuhe angleze) për të mësuar gjithçka që ju nevojitet.

1: Lëvizja horizontale

Lëvizja e parë që do të demonstrojmë është horizontale. Ne do të lëvizim objektet nga e majta në të djathtë dhe nga e djathta në të majtë.

Duke lëvizur në të djathtë

Për të lëvizur një objekt do të përdorim transformimi: përkthe (x,y), ku X - numër pozitiv, dhe Y=0.


HTML
Hapni redaktuesin tuaj të preferuar të kodit dhe shkruani sa vijon:

Ne përcaktuam tre klasa për figurën:

• objekti: Vendosja e rregullave bazë të objektit tonë.
• furgon: Do të përdorim objekte të ndryshme për të demonstruar çdo lloj animacioni.
• lëviz-djathtas: Duke përdorur këtë klasë ne do të lëvizim objektin tonë.

CSS
Së pari, ne do të vendosim objektin tonë (imazhin e kamionit) në qendër.
.objekt (pozicioni: absolut; ) .furgon (lart: 45%; majtas: 44%; )
Në këtë shembull, ne do ta zhvendosim objektin 350px djathtas. Sintaksa e përdorur transformimi: translate (350px,0);. Përveç kësaj, objekti do të lëvizë vetëm kur rri pezull mbi të: #axis:hover .lëviz-djathtas.

#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: përkthe (350px,0); /** Firefox **/ )
Parametri transformoj thjesht do të lëvizë objektin nga një pikë në tjetrën, por nuk do të krijojë një animacion lëvizjen e dhënë. Për ta rregulluar këtë, duhet të shtoni një parametër lëvizjeje te class.object.

Objekti ( pozicioni: absolut; tranzicion: të gjitha 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: të gjitha 2s ease-in-out ; /** Firefox **/ -o-tranzicioni: të gjitha 2s-të lehtësohen në dalje; /** Opera **/ )
Ky rregull lëvizjeje do t'i thotë shfletuesit të animojë Të gjitha parametrat e objektit aktiv 2 sekonda(pa vonesë) duke përdorur funksionin lehtësim-në-jashtë.
Ne mund të përdorim 6 funksione të ndryshme të kohës së lëvizjes:

• lineare: ndodh lëvizja shpejtësi konstante nga fillimi në fund.
• lehtësi: Lëvizja fillon ngadalë dhe më pas rrit shpejtësinë.
• lehtësimi: Lëvizja fillon ngadalë.
• lehtësim: Lëvizja përfundon ngadalë.
• lehtësim-në-jashtë: Lëvizja fillon dhe mbaron ngadalë.
• kub-bezier: Përcaktoni manualisht vlerën e lëvizjes.

Duke lëvizur majtas

Për të lëvizur një objekt në të majtë, ju vetëm duhet të vendosni kuptim negativ te boshti Oh, derisa Y mbetet e pandryshuar. Në rastin tonë, ne do ta zhvendosim objektin në - 350 px në të majtë.

HTML
Krijo dokument i ri html dhe ngjisni kodin e mëposhtëm:

Këtë herë ne po përdorim klasën leviz Majtas për të lëvizur objektin në të majtë.

CSS
Tani le të futim -350px për boshtin OX. transformimi: translate (-350px,0);- zhvendoseni objektin në të majtë.
#axis:hover .move-left ( transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px ,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ )
Meqenëse i kemi përcaktuar më herët rregullat e lëvizjes, nuk kemi nevojë ta bëjmë përsëri.

2: Lëvizja vertikale

Lëvizja e një objekti vertikalisht nuk do të jetë e vështirë, sepse është identike me atë horizontale. I vetmi ndryshim është se ne do të përdorim vlerën -y për të shkuar lart dhe për të vlerësuar y për të lëvizur poshtë.

Duke levizur

HTML
Modeli HTML është identik me shembujt e mëparshëm. Megjithatë, ne do ta zëvendësojmë objektin tonë me një raketë (për qartësi) dhe do të caktojmë një klasë lëvizëse.

CSS
Ashtu si kamioni, ne do ta vendosim raketën në qendër:
.raketë (lart: 43%; majtas: 44%; )
Siç kemi theksuar më herët, koordinata Y duhet të jetë negative. Në rastin tonë, ne do ta zhvendosim objektin 350 px lart.

#axis:hover .move-lart ( transformim: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: përkthe (0,-350 px); )

Le të lëvizim poshtë

Siç mund ta keni marrë me mend, për të lëvizur një objekt poshtë, koordinata Y duhet të jetë pozitive dhe koordinata X duhet të jetë 0. Sintaksa: përkthe (0,y);

HTML

CSS
#axis:hover .move-down ( transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); )

3: Lëvizja diagonale

Për të lëvizur një objekt diagonalisht, ne do të kombinojmë parametrat x Dhe y. Sintaksa do të jetë si më poshtë: transformoj: translate(x,y). Në varësi të drejtimit, vlera x Dhe y mund të jetë ose pozitive ose negative.

HTML

CSS
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: përkthe (350px,-350px); )

4: Rrotullimi

Rrotullimi në CSS3 kontrollohet nga koordinatat e shkallës (nga 0° në 360°). Për të rrotulluar një objekt, aplikoni opsionet e mëposhtme: transformimi: rrotullo (ndeg); Ku n- gradë.

Rrotullimi në drejtim të akrepave të orës

Për të rrotulluar një objekt në drejtim të akrepave të orës, aplikoni një vlerë pozitive në rrotullo (ndeg).

HTML

CSS
#axis:hover .rotate360cw ( transformim: rrotullim(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); )

Rrotullimi në drejtim të kundërt të akrepave të orës

Për të rrotulluar një objekt në drejtim të kundërt të akrepave të orës, aplikoni një vlerë negative për rrotullo (ndeg).

HTML

CSS
#axis:hover .rotate360ccw ( transformim: rrotullim (-360deg); -webkit-transform: rotate (-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); )

5: Shkallëzimi

Shkallëzimi është tipar interesant CSS3. Duke përdorur parametrin shkallë (n) ose parametri shkallë (x,y), ne mund të rrisim ose zvogëlojmë objektin drejtpërdrejt në Korniza HTML. Objekti do të ndryshojë madhësinë në varësi të vlerës së n/x,y, ku boshti X është gjerësia dhe boshti Y është lartësia.
Le të shohim shembullin e mëposhtëm.

Sot do të shikojmë një efekt kaq të mrekullueshëm të disponueshëm për ne falë CSS3. Bëhet fjalë për rreth rrotullimit të një blloku ose imazhi. Ai përshtatet çuditërisht në ndërfaqen e faqes dhe, pasi e kishte zotëruar këtë mësim, ju mund ta aplikoni këtë efekt në projektet tuaja.

Pra, ne kemi një grup blloqesh me disa përmbajtje. Ne duam që kur kalojmë mbi një bllok, ai të rrotullohet rreth boshtit të tij dhe të tregojë informacion në anën e pasme. Mendoj se të gjithë kanë luajtur letra në një moment dhe të gjithë e mbajnë mend atë moment emocionues kur duhej t'i kthenin ato me fytyrë lart. Ne do të bëjmë të njëjtën gjë tani. Këtu është e jona shembull origjinal:

Le të fillojmë të shkruajmë CSS-në tonë. Gjëja e parë që duhet të bëjmë, duke qenë se po punojmë me transformime 3D, është të vendosim distancën e objektit tonë nga këndvështrimi. Dhe këtu është kodi i parë i ndyrë:

Flip-container ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspektiva:1000; )

Ju mund të specifikoni çdo numër tjetër. Eksperimentoni për veten tuaj. Për pjesët e përparme (.para) dhe të pasme (.mbrapa) të tona kartë loje duhet vendosur pozicionim absolut në mënyrë që të “mbivendosen” njëra-tjetrën në pozicionin përfundimtar. Ne gjithashtu duhet ta bëjmë këtë anën e pasme Elementet e kthyera nuk u shfaqën gjatë animacionit. Vetia e dukshmërisë së pasme do të na ndihmojë me këtë:

Përpara, .mbrapa ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; gjerësia:100%; lartësia:100%; pozicioni: absolute; lart: 0; majtas: 0;)

Le të vendosim indeksin z për anën e përparme (në mënyrë që të jetë në krye në gjendjen e paracaktuar) dhe të përshkruajmë këndet e rrotullimit të paracaktuar në lidhje me boshtin vertikal:

/* ana e përparme vendoset mbi anën e pasme */ .para ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transformim: rotateY(0deg); z-index: 2;) /* anasjelltas, fillimisht ana e fshehur */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz -transformoj: rrotulloY(180deg); -ms-transformoj: rrotulloY(180deg); -o-transformo: rrotulloY(180deg); )

Kur rri pezull, kartat tona do të rrotullohen, këndet e anëve të tyre do të ndryshojnë nga 0 në 180 gradë dhe nga 180 gradë në 0:

/* ana e përparme vendoset mbi anën e pasme */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); - ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); ) /* anasjelltas, fillimisht ana e fshehur */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz -transformoj:rrotullojY (0deg); -ms-transformoj: rrotulloY(0deg); -o-transformoj: rrotulloY(0deg); transformim: rrotulloY(0deg); )

Jemi pranë përfundimit të punës. Gjithçka që mbetet është të njoftoni shfletuesin se si elementet fëmijë duhet të shfaqet në hapësirën 3D. Kjo veti duhet të përdoret në lidhje me vetinë e transformimit dhe quhet transform-style . Kjo veçori duhet të aplikohet në një bllok me klasën .flipper, dhe jo në .back dhe .front, përndryshe do të na pret një surprizë e pakëndshme në shfletuesin Opera.

Flipper ( -webkit-transform-style: ruaj-3d; -moz-transform-style: ruaj-3d; -ms-transform-style: ruaj-3d; -o-transform-style:preserve-3d; transform-style: ruaj-3d ;)

Hurre, ne e bëmë atë. Sapo mësuam se si të bëjmë rotacion duke përdorur CSS. Pjesa më e mirë është se të gjithë e mbështesin atë. shfletues modern. Po, po, përdoruesit në Internet Explorer mund ta shihni këtë bukuri duke filluar nga versioni 10. Fatkeqësisht, në Rusi ka pasur një praktikë vicioze të zvarritjes së një vargu IE8 dhe IE9 të vjetëruar. Kështu që klienti im donte që një këshillë veglash të shfaqej në shfletuesit më të vjetër në momentin e pezullimit. Le të shohim se çfarë mund të bëjmë.

Gjëja e parë që ju vjen në mendje është të përdorni direktivën @mbështetje. Mund të shkruanim:

@mbështet (transform-style: ruaj-3d) ose (-moz-transform-style: ruaj-3d) ose (-webkit-transform-style: ruaj-3d) ( /* stilet për shfletuesit që mbështesin */ /* 3D transformon */ )

Fatkeqësisht, edhe IE 11 nuk di asgjë për të, kështu që ne do të përdorim mënyrën e modës së vjetër:

Në skedarin ie.css ne do të përshkruajmë stilet e nevojshme për këshillën tonë të veglave. Nuk do ta paraqes këtu, sepse... është përtej qëllimit të këtij artikulli (dhe nuk ka asgjë interesante atje). Nëse dëshironi, mund ta shihni në shembullin tonë të rrotullimit vertikal duke përdorur CSS. Po sikur të jemi të interesuar për rrotullimin horizontal? Në këtë rast, kodi ynë transformohet si ky:

Vertical.flip-container ( pozicioni: relative; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213,5 px; origjina e transformimit: 100% 213,5 px; ) .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz -transformoj: rotateX(0deg);-o-transformoj:rotateX(0deg);-ms-transformoj:rotateX(0deg);transformoj:rotateX(0deg);) .vertical .prapa, .vertikal.flip-container:hover . front, .vertical.flip-container.hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX( 180 gradë); transformimi: rrotullohetX (180 gradë); )

Funksioni rotate() në CSS kryen një transformim rrotullimi dydimensional në një element rreth një qendre fikse. Në këtë rast, blloku nuk deformohet dhe nuk ndikon në pozicionin e kontejnerëve fqinjë HTML. Metoda ju lejon të specifikoni këndin e rrotullimit. Përveç kësaj, është e mundur të vendosni një qendër arbitrare të rrotullimit.

Transformimi i bllokut

Në CSS, rotate() është një funksion transformimi, kështu që duhet të kalohet te vetia e transformimit të elementit.

Elementi ( transformimi: rrotullohet (45 gradë); )

Argumenti i parë dhe i vetëm është këndi me të cilin objekti do të rrotullohet. Rrotullimi kryhet në hapësirë ​​dy-dimensionale. Për transformimet 3D, ekzistojnë funksione CSS rotateX(), rotateY(), rotateZ() dhe rotate3d().

Hapësira në faqen e zënë fillimisht nga elementi mbetet e rezervuar për të. Lëvizja vizuale ndodh në një shtresë të re pa lëvizur blloqet ngjitur.

Këndi i rrotullimit

Argumenti i këndit i kaluar në metodë duhet të jetë një lloj CSS . Ai përbëhet nga vlerë numerike dhe njësitë e matjes deg (nga diploma - grada angleze).

Një kënd pozitiv përcakton rrotullimin e objektit në drejtim të akrepave të orës, një kënd negativ - në drejtim të kundërt.

Qendra e rrotullimit

Si parazgjedhje, blloku rrotullohet rreth qendrës së tij gjeometrike. Për të ndryshuar këtë pikë ju duhet të përdorni vetinë transform-origin.

Sipas standardit, duhen tre parametra që specifikojnë koordinatat përgjatë boshteve X, Y dhe Z. Por duke qenë se rotate() në CSS është një transformim dydimensional, do të mjaftojë të kalohen vetëm dy vlera.

Elementi ( transformimi: rrotullohet (45 gradë); origjina e transformimit: 20 px 100%; )

Koordinata përgjatë secilit aks mund të specifikohet në çdo njësi të vlefshme gjatësie, përqindje të madhësisë së bllokut ose duke përdorur fjalë kyçe lart, poshtë, majtas, djathtas. Origjina ndodhet në këndin e sipërm të majtë të enës drejtkëndore.

Animacion me rrotullim

Vetia e transformimit i përshtatet mirë ndryshimeve dinamike, prandaj CSS ju lejon të krijoni një animacion të rrotullimit të një elementi në hapësirën dy-dimensionale.

Nëse dëshironi të rrotulloni një objekt në përgjigje të një veprimi specifik të përdoruesit, si p.sh. pezullimi, mund të përdorni Vetia e tranzicionit CSS, i cili përcakton ndryshimin e ngadaltë të vlerës së pronave të tjera.

Element ( tranzicion: transformim 2s; ) element: hover ( transformim: rrotullo (180 gradë); )

TE tek elementi origjinal nuk aplikohen transformime, por kur rri pezull mbi të, blloku do të rrotullohet pa probleme 180 gradë brenda dy sekondave. Kur përdoruesi heq kursorin, do të ndodhë i njëjti rrotullim i qetë në pozicionin origjinal.

Më shumë në mënyrë të komplikuar animimi i një objekti është të përcaktojë sekuencën e ndryshimeve të kornizës për të duke përdorur vetitë dhe rregullin @keyframes.

Elementi ( emri i animacionit: rrotullohet; kohëzgjatja e animacionit: 2 sekonda; numërimi i përsëritjes së animacionit: i pafund; funksioni i kohës së animacionit: linear; ) @keyframes rrotullohen ( nga ( transformimi: rrotullohen (0 gradë); ) në ( transformimi: rrotullohen (360 gradë); )

Një animacion rrotullues aplikohet në elementin e specifikuar, duke bërë që ai të rrotullohet plotësisht nga 0 në 360 gradë brenda dy sekondave. Vetia animacion-iteracion-count e vendos animacionin të përsëritet pafundësisht dhe funksioni animacion-kohë-cakton një efekt të qetë tranzicioni. Kombinimi i vetive in me transformimet rrotulluese ju lejon të krijoni efekte të bukura dinamike.

Për shkak të faktit se CSS po zhvillohet me një ritëm të shpejtë dhe krijimi i animacionit është bërë edhe më i lehtë pa duke përdorur Javascript Shumë sajte kanë disa elementë shumë interesantë për të cilët nuk mund të mos jeni të interesuar. Në mësimin e sotëm do të shikojmë se si mund të krijoni animacion duke përdorur kornizat kryesore (kjo është edhe më interesante sesa thjesht përdorimi i duke përdorur CSS transformimet). Gjithashtu, animacioni ynë nuk do të jetë vetëm në një plan, por do të ketë një efekt 3D. Nëse nuk e dini pse dhe ku mund ta aplikoni këtë efekt, shkoni te lajmet e plota dhe unë do t'ju tregoj për të atje.

Nëse CSS transformohet nga seria e mëparshme e tutorialit të punuar në Shfletuesit Firefox, Chrome, Safari dhe Internet Explorer 10+, atëherë kur krijoni animacion 3D ai do të funksionojë vetëm në shfletuesit WebKit dhe Shfletuesi Mozilla. Më së shumti transformime të thjeshta do të funksionojë në IE10, por asgjë më komplekse nuk do të funksionojë, pasi ai shfletues nuk mbështet opsionin ruaj-3d për krijimin e shtresave 3D.

Animacion CSS

Animacioni që do të krijojmë do të përmbajë një imazh që rrotullohet rreth boshtit Y:

E lezetshme?!

Për ata që nuk kanë animacion 😉:

Disa HTML

Gjithçka është e qartë dhe e thjeshtë në strukturën HTML:

Korniza kyçe CSS

Cilat janë kornizat kryesore?

Në bllok @keyframes ekzistojnë një sërë rregullash që quhen korniza kyçe. Kornizat kryesore përmbajnë veti që aplikohen në një moment të caktuar kohor gjatë animacionit. Gjatë animacionit, vlerat interpolohen ("kalim pa probleme" nga një vlerë në tjetrën) dhe ne shohim vetëm një tranzicion të qetë.

Kjo mund t'ju duket e ndërlikuar, por ky është një nga shembujt më të thjeshtë.

Le të përcaktojmë kornizën kryesore fillestare dhe mbaruese:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* WebKit dhe Opera */ rrotullues @-webkit-keyframes ( nga ( -webkit-transform : rotateY(0deg) ;) në ( -webkit-transform : rotateY(-360deg) ;) ) /* Të gjithë shfletuesit e tjerë */@keyframes spinner ( nga ( -moz-transform : rotateY(0deg) ; -ms-transform : rotateY(0deg) ; transform : rotateY(0deg) ;) në ( -moz-transform : rotateY(-360deg) ; -ms- transformim : rrotulloY(-360 gradë); transformim: rrotulloY(-360 gradë) ;) )

Përveç kornizave kryesore, ne jemi të interesuar edhe për @keyframes spinner , ku tregojmë se çfarë do t'i referohemi gjatë animacionit më vonë, përkatësisht tjerrëse.

Krijimi i një skene

Ne kemi nevojë për një element në të cilin animacioni ynë do të fitonte vëllim dhe do të shfaqej një efekt vëllimi. Skena, ndryshe nga imazhi rrotullues, është fiksuar në faqe.

Për skenën do të përdorim vetinë e perspektivës, e cila është e re për ne, e cila jep thellësi. Vlera është e specifikuar në pixel. Ai përcakton distancën nga përdoruesi tek elementët në perspektivë. E di që është e vështirë të kuptosh menjëherë :) Le të reduktojmë nga 1200 px përpara 300 px dhe hidhini një sy rezultatit më poshtë:

E lezetshme?!

Dhe gjithashtu video:

Lidhja e një animacioni me një element

Tani do të shihni disa prona të tjera të reja. Dhe as nuk dua t'ju detyroj t'i mësoni përmendësh menjëherë dhe të kuptoni kuptimet. Ju mund ta bëni atë ndryshe: thjesht shikoni ato dhe atë që kuptoni, do ta kuptoni. Në fakt, ndërsa studioni më tej mësimet, do t'i shihni ato shpesh dhe do të filloni të kuptoni se për çfarë shërbejnë. Pra, mos u shqetësoni për faktin se ka shumë prej tyre dhe ju nuk dini apo kuptoni diçka!

Dhe pronat janë si më poshtë:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

#spinner (gjerësia: 250 px; lartësia: 290 px; sfondi: url ("http://www..jpg") pa përsëritje; rreshtimi i tekstit: në qendër; ngjyra: #fff; margjina: 0 automatik; -webkit-animation -emri : spinner; -funksioni i kutisë së internetit-animacion-kohës: lineare ; -webkit-animation-iteration-count: e pafundme; -webkit-animacion-kohëzgjatja : 6s; Emri i animacionit: spinner; /* tregoni kornizat kryesore të animacionit të quajtur "spinner" */ animacion-kohë-funksion : linear ; /* funksioni i sinkronizimit me të cilin do të bëhen konvertimet */ animacion-përsëritje-count : infinit; /* numri i përsëritjeve të animacionit. "i pafund" do të thotë pafundësisht */ animacion-kohëzgjatja: 6s; /* kohëzgjatja e animacionit */-webkit-transform-style : ruaj-3d; -moz-transform-style : ruaj-3d; -ms-transform-style : ruaj-3d; transform-style : ruaj-3d; /* tregojnë se ky është një transformim 3D */) #spinner :hover ( -webkit-animation-play-state : në pauzë; animacion-play-state : në pauzë; /* ndaloni animacionin */ }

Kam nënshkruar pronat pa prefikse sepse ato kryejnë funksione të ngjashme, vetëm për shfletues të tjerë. Dua të vërej gjithashtu se ne e ndalojmë animacionin duke përdorur veçorinë speciale animation-play-state kur rri pezull mbi një imazh.