Ponekad neobična dizajnerska rješenja tjeraju dizajnera izgleda da pribjegne istom nestandardna rješenja prilikom pozicioniranja teksta. Na primjer, rotirajte jedan od tekstualni elementi do određenog ugla. Ovaj članak će pokriti nekoliko jednostavna rješenja ovaj zadatak.
Zamjena teksta slikom
Najprimitivnije rješenje ovog problema bit će korištenje slike. Pomoću ozloglašenog Adobe softver photoshop tekst lako se okreće pod bilo kojim uglom. Kao što razumijete, za korištenje ove metode nije potrebna velika inteligencija.
U nekim situacijama je nemoguće koristiti drugu metodu, ali se u većini slučajeva odmiču od upotrebe slike. To je zbog niza nedostataka koji prate ovu tehniku:
- Nemogućnost korisnika da kopira informacije u navedeni kontejner;
- Složenost postupka za ispravke tekstualni dio element;
- Povećan promet na serveru stranice;
- Rast zahtjeva prema serveru prilikom ažuriranja resursa.
Unatoč činjenici da je bilo toliko negativnih aspekata korištenja slike, metoda ima nekoliko pozitivnih učinaka.
- Kompatibilnost među pretraživačima– nema problema pri prikazivanju u različitim pretraživačima.
- Visoka sposobnost pozicioniranja slike.
Još uvek unutra ovaj slučaj negativne strane nadmašiti. Savjetujem vam da potražite druga rješenja.
Korištenje svojstva CSS transformacije
Primena ove metode je mnogo veća u poređenju sa slikom. značajna razlika stvara fleksibilnost u uređivanju teksta i mogućnost odabira i kopiranja sadržaja rotiranog kontejnera. Glavni kamen spoticanja za razvoj ove tehnike bila je kompatibilnost među pretraživačima. Do sada smo na ovom frontu postigli prilično dobre rezultate, što omogućava bez problema primjenu svojstva transformacije.
Suština svojstva je da se ravan podijeli po stepenima. Kao rezultat toga, kada odredite određeni kut, kontejner će zauzeti odgovarajuću poziciju. Treba napomenuti da je nekretnina čista forma ne primjenjuje. Trebalo bi da bude popraćeno svojstvima dobavljača, koji, u stvari, pružaju visok pokazatelj kompatibilnosti među pretraživačima.
Važno je napomenuti da poziciju ne mijenja tekst unutar bloka, već sam blok kojem se osobina adresira preko selektora klasa ili na neki drugi način. Ispod je primjer korištenja metode
Kontejner ( - moz- transform: rotirati (- 45 stupnjeva) ; - webkit- transform: rotirati (- 45 stupnjeva) ; - o- transformirati: rotirati (- 45 stupnjeva) ; - ms- transformirati: rotirati (- 45 stupnjeva) ; transformirati: rotirati ( -45 stepeni) ;)
Kao rezultat, dobijamo nešto ovako:
Okrećem se ovom svojstvu, dizajn će biti prikazan bez problema u Firefoxu, Opera, Internet Explower i drugim webkit pretraživačima.
Pozivanje putem Javascript-a
Suština procesa je potpuno slična onoj koja je razmatrana prije ove metode. Da biste ga implementirali, potrebno vam je minimalno znanje js-koda, matematike i razumijevanje Matrix filtera.
javascript
var deg2radians = Math. PI * 2 / 360 , stepen = - 4 ; rad = deg * deg2radijani, costheta = Math. cos (rad) , sintheta = Math. sin(rad) ; jQuery(".rotatedBlock") . css((filter: "progid:DXImageTransform.Microsoft.Matrix(M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="automatsko proširivanje", omogućeno=true)"} ) ;
Kao rezultat, dobićemo istu sliku u pretraživaču kao kada koristimo svojstvo transform.
Čak i ako ne razumijete nijedan znak u ovom unosu, nije važno. Za rad s ovim kodom dovoljno je razumjeti da je vrijednost ugla napisana u drugom redu, zamjenjujete ga za sebe, ostatak se jednostavno kopira bez promjena.
Karakteristike korištenja Javascript-a i CSS-a
Ove dvije metode imaju nekoliko manjih razlika u principu rada, koje je vrlo važno znati i uzeti u obzir.
Prva razlika je zasnovana na razlici između visine bloka i njegovog položaja. Izlaz iz situacije je prilično jednostavan i jeste korištenje svojstva margine. Uvlačenjem postavljamo blok na željeni nivo i položaj. Ostale nedoslednosti u pozicioniranju mogu se eliminisati dodeljivanjem apsolutne vrednosti pozicije bloku, što takođe funkcioniše efikasno.
Složeniji i prilagođeniji pristup baziran je na upotrebi svojstva transformacije porijekla. Suština ove tehnike bit će opisana u narednim člancima.
Sljedeća razlika leži u suštini samog okreta. Kada koristite js kod, tačka okretanja je na ivici bloka. U drugoj metodi, ova tačka se nalazi u centru elementa. Da biste lakše razumjeli, pogledajte sliku ispod.
- Prevod
Zdravo, dragi habradrug! Postoji mnogo primjera sjajnih CSS3 transformacija i prijelaza na webu. U ovom članku ćemo se osvrnuti na osnove CSS3 i naučiti kako napraviti nešto poput ovoga. Ovaj vodič će biti koristan za one koji su tek počeli da se upoznaju sa CSS3. Hajde da počnemo!
Koordinatni sistem
Da bismo lakše razumjeli kako funkcionira kretanje objekta, radit ćemo u koordinatnom sistemu.
Međutim, naš koordinatni sistem ima jednu posebnost: Y-osa je usmjerena u suprotnom smjeru nego inače. Zašto? Činjenica je da HTML i CSS (zajedno sa, na primjer, ActionScript) koriste inverzni koordinatni sistem, jer web stranica počinje s lijeve strane gornji ugao i ide dole.
Napomena: Pretpostavljamo da ste već upoznati HTML struktura i CSS. Preskočiću objašnjenje kako se postaviti css fajl kako postaviti slike itd. Fokusiraćemo se na animiranje slika. Ako niste sigurni koje su vaše vještine visoki nivo, onda vam savjetujemo da pogledate tok lekcija "HTML i CSS za 30 dana" (besplatno i na engleski jezik) da naučite sve što vam je potrebno.
1: Horizontalno kretanje
Prvo kretanje koje ćemo pokazati je horizontalno. Predmete ćemo pomicati s lijeva na desno i zdesna na lijevo.Kretanje udesno
Za pomicanje objekta ćemo koristiti transform: translate(x,y), gdje je X - pozitivan broj, i Y=0.
HTML
Otvorite svoj omiljeni uređivač kodova i upišite sljedeće:
Definisali smo tri klase za sliku:
- objekt: Uspostavljanje glavnih pravila našeg objekta.
- van: Koristit ćemo različite objekte da demonstriramo svaku vrstu animacije.
- move-right: Koristeći ovu klasu, pomjerit ćemo naš objekat.
Prvo ćemo postaviti naš objekt (slika kamiona) u centar.
.objekt (pozicija: apsolutna; ) .van (gore: 45%; lijevo: 44%; )
U ovom primjeru pomjerit ćemo objekt za 350px udesno. Korištena sintaksa transform: translate(350px,0);. Osim toga, objekt će se pomicati samo kada zadržite pokazivač iznad njega: #axis:hover .move-desno.
#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ )
Parametar transformirati samo će premjestiti objekt s jedne tačke na drugu, ali neće stvoriti animaciju dati pokret. Da bismo ovo popravili, moramo dodati parametar premještanja u .object klasu.
Objekat ( pozicija: apsolutna; prijelaz: sve 2s jednostavno ulazak; -webkit-prijelaz: sve 2s jednostavno ulazak; /** Chrome & Safari **/ -moz-prijelaz: lako ulazak svih 2s ; /** Firefox **/ -o-transition: sve 2s jednostavnost-in-out; /** Opera **/ )
Ovo pravilo premještanja će reći pretraživaču da animira sve parametri objekta uključeni 2 sekunde(bez odlaganja) koristeći funkciju lakoća ulaska.
Možemo koristiti 6 različitih funkcija mjerenja vremena kretanja:
- linearno: pokret u toku konstantna brzina od početka do kraja.
- lakoća: Kretanje počinje polako, a zatim povećava brzinu.
- ease-in: Kretanje počinje polako.
- ease-out: Pomicanje se završava polako.
- lakoća ulaska: Kretanje počinje i polako se završava.
- cubic-bezier: Ručno definirajte vrijednost pomjeranja.
Kretanje ulijevo
Da biste pomaknuli objekt ulijevo, trebate samo staviti negativno značenje do ose OH, dok Y ostaje nepromijenjena. U našem slučaju, mi ćemo premjestiti objekt na - 350px nalijevo.
HTML
Stvoriti novi dokument html i zalijepite sljedeći kod:
Ovaj put koristimo čas Pomjeri lijevo, da pomerite objekat ulevo.
css
Sada unesite -350px za OX osu. transform: translate(-350px,0);- pomaknite objekt ulijevo.
#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 **/ )
Pošto smo pravila kretanja već definirali ranije, ne moramo to ponavljati.
2: Vertikalno kretanje
Pomicanje objekta okomito neće biti teško, jer je identično horizontalnom. Jedina razlika je u tome što ćemo koristiti vrijednost -y da se krene nagore i vrednuje y da se pomerim dole.kreće gore
HTML
HTML šablon je identičan prethodnim primjerima. Međutim, naš objekat ćemo zamijeniti raketom (radi jasnoće) i dodijeliti klasu pomicanja prema gore.
css
Baš kao i kamion, raketu ćemo postaviti u centar:
.rocket (gore: 43%; lijevo: 44%; )
Kao što smo ranije napomenuli, Y koordinata mora biti negativna. U našem slučaju, pomjerit ćemo objekt 350px gore.
#axis:hover .move-up ( transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: prevedi (0,-350px); )
Idemo dole
Kao što ste pretpostavili, da biste pomaknuli objekt prema dolje, Y koordinata mora biti pozitivna, a X mora biti 0. Sintaksa: translate(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: Dijagonalno kretanje
Za pomicanje objekta dijagonalno, kombiniramo parametre x I y. Sintaksa će biti: transform: translate(x,y). Ovisno o smjeru, vrijednosti x I y može biti i pozitivno i negativno.
HTML
css
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: prevedi (350px,-350px); )
4: Rotacija
Rotacija u CSS3 kontroliše se stepenskim koordinatama (od 0° do 360°). Za rotiranje objekta, primijenite sljedeće opcije: transformirati: rotirati (ndeg); gdje n- stepeni.
Rotacija u smjeru kazaljke na satu
Za rotiranje objekta u smjeru kazaljke na satu, primijenite pozitivnu vrijednost za rotirati (deg).HTML
css
#axis:hover .rotate360cw ( transformacija: rotirati (360 stupnjeva); -webkit-transform: rotirati (360 stupnjeva); -o-transform: rotirati (360 stupnjeva); -moz-transform: rotirati (360 stupnjeva); )
Rotacija u smjeru suprotnom od kazaljke na satu
Za rotiranje objekta u smjeru suprotnom od kazaljke na satu, primijenite negativnu vrijednost za rotirati (deg).
HTML
css
#axis:hover .rotate360ccw ( transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); )
5: Zumiranje
Skaliranje je zanimljiva karakteristika css3. Korištenje parametra skala(n) ili parametar skala(x,y), možemo ili povećati ili smanjiti objekt direktno u HTML okvir. Objekt će promijeniti veličinu ovisno o vrijednosti n/x,y, gdje je x-osa širina, a y visina.Pogledajmo sljedeći primjer.
Danas ćemo pogledati tako divan efekat koji nam je dostupan zahvaljujući CSS3. Radi se o o rotiranju bloka ili slike. Nevjerovatno se uklopio u sučelje stranice i, savladavši ovu lekciju, ovaj efekat možete primijeniti u svojim projektima.
Dakle, imamo skup blokova sa određenim sadržajem. Želimo da se blok rotira oko svoje ose kada lebdi iznad njega i prikazuje informacije na poleđini. Mislim da su svi nekada igrali karte i svi se sjećaju tog uzbudljivog trenutka kada su ih morali okrenuti naopačke. I sada ćemo uraditi isto. Evo naše originalan primjer:
Počnimo pisati naš CSS. Prva stvar koju moramo uraditi, budući da radimo sa 3D transformacijama, je da podesimo udaljenost našeg objekta od tačke gledišta. A evo i prvog sranja koda:
Flip-container ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspektiva:1000; )
Možete postaviti bilo koji drugi broj. Eksperimentirajte sami. Za prednje (.front) i zadnje (.back) dijelove našeg karta za igranje morate pitati apsolutno pozicioniranje tako da se "preklapaju" u krajnjoj poziciji. Takođe treba da napravimo stražnja strana preokrenuti elementi nisu prikazani tokom animacije. Svojstvo backface-visibility će nam pomoći u tome:
Front, .back ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; širina:100%; visina:100%; pozicija: apsolutno; gore: 0; lijevo: 0; )
Postavite z-indeks za prednju stranu (tako da je na vrhu u zadanom stanju) i opišite zadane uglove rotacije u odnosu na vertikalnu os:
/* prednja strana postavljena preko zadnje strane */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY( 0deg ); transformacija: rotateY(0deg); z-indeks: 2; ) /* nazad, početno skrivena strana */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform : rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); )
Kada lebdite, naše karte će se rotirati, uglovi njihovih strana će se promeniti od 0 do 180 stepeni i od 180 stepeni do 0:
/* prednja strana postavljena preko zadnje strane */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform : rotateY(180deg); -o-transform: rotateY(180deg); ) /* nazad, početno skrivena strana */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz-transform: rotateY (0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); )
Blizu smo završetka našeg posla. Ostaje samo pustiti pretraživač da shvati kako podređeni elementi moraju biti prikazane u 3D prostoru. Ovo svojstvo se mora koristiti zajedno sa svojstvom transformacije i naziva se transform-stil. Ovo svojstvo treba primeniti na blok sa .flipper klasom, a ne na .back i .front , inače nas čeka neprijatno iznenađenje u pretraživaču Opera.
Flipper ( -webkit-transform-style: sačuvaj-3d; -moz-transform-style: sačuvaj-3d; -ms-transform-style: sačuvaj-3d; -o-transform-style:preserve-3d; transform-style: sačuvaj-3d ;)
Vau, uspjeli smo. Upravo smo naučili kako rotirati pomoću CSS-a. Najbolji dio je da ga svi podržavaju. moderni pretraživači. Da, korisnici Internet Explorer također možete vidjeti ovu ljepotu od verzije 10. Nažalost, u Rusiji postoji opaka praksa prevlačenja niza zastarjelih IE8 i IE9. Dakle, moj klijent je želio da se u starijim pretraživačima prikaže opis alata u vrijeme lebdenja. Hajde da vidimo šta možemo da uradimo.
Prva stvar koja vam pada na pamet je korištenje direktive @supports. Mogli bismo napisati:
@podržava (transform-style: sačuvaj-3d) ili (-moz-transform-style: sačuvaj-3d) ili (-webkit-transform-style: sačuvaj-3d) ( /* stilovi za pretraživače koji podržavaju */ /* 3D transformira */)
Jao i ah, čak ni IE 11 ne zna ništa o tome, pa hajde da koristimo staromodan način:
U ie.css datoteci ćemo opisati stilove potrebne za naš tooltip. Neću je donositi ovdje, jer. to je izvan okvira ovog članka (i tu nema ništa zanimljivo). Možete to vidjeti u našem CSS primjeru vertikalne rotacije ako želite. Ali šta ako nas zanima horizontalna rotacija? U ovom slučaju, naš kod se transformiše ovako:
Vertical.flip-container ( pozicija: relativna; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213.5px; transform-origin: 100% 213.5px; ) .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz -transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); ) .vertical .back, .vertical.flip-container:hover . front, .vertical.flip-container.hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX( 180deg); transformacija: rotateX(180deg); )
Funkcija rotate() u CSS-u izvodi dvodimenzionalnu transformaciju rotacije na elementu oko fiksnog centra. Blok nije deformisan i ne utiče na poziciju susednih HTML kontejnera. Metoda vam omogućava da odredite ugao rotacije. Osim toga, moguće je postaviti proizvoljan centar rotacije.
Blok transformacija
U CSS-u, rotate() je funkcija transformacije, tako da mora biti proslijeđena svojstvu transformacije elementa.
Element ( transformacija: rotirati (45 stepeni); )
Prvi i jedini argument je ugao za koji će se objekat rotirati. Rotacija se vrši u dvodimenzionalnom prostoru. Za 3D transformacije postoje CSS funkcije rotateX(), rotateY(), rotateZ() i rotate3d().
Prostor koji je prvobitno zauzimao element na stranici ostaje rezerviran za njega. Vizuelno kretanje se dešava u novom sloju, bez pomeranja susednih blokova.
Ugao rotacije
Argument kuta proslijeđen metodi mora biti CSS tipa
Pozitivan kut određuje rotaciju objekta u smjeru kretanja kazaljke na satu, negativan kut - u suprotnom smjeru.
Centar rotacije
Po defaultu, blok se rotira oko svog geometrijskog centra. Da biste promijenili ovu tačku, trebate koristiti svojstvo transform-origin.
Podrazumevano, potrebna su tri parametra koja definišu koordinate x, y i z. Ali pošto je rotate() u CSS-u 2D transformacija, potrebno je da prosledite samo dve vrednosti.
Element ( transformacija: rotirati (45 stupnjeva); transformacija porijekla: 20px 100%; )
Koordinate duž svake ose mogu se navesti u bilo kojoj važećoj jedinici dužine, kao procenat veličine bloka, ili sa ključne riječi gore, dolje, lijevo, desno. Izvor se nalazi u gornjem lijevom uglu pravokutnog kontejnera.
Animacija rotacije
Svojstvo transformacije dobro je podložno dinamičkim promjenama, stoga vam CSS omogućava kreiranje animacije rotacije elementa u dvodimenzionalnom prostoru.
Ako želite rotirati objekt kao odgovor na određenu radnju korisnika, kao što je prelazak miša iznad, možete koristiti Tranziciono CSS svojstvo, što određuje sporu promjenu vrijednosti ostalih svojstava.
Element (prijelaz: transformacija 2s; ) element:hover (transformacija: rotirati (180deg); )
TO originalni element nikakve transformacije se ne primjenjuju, ali kada zadržite pokazivač miša iznad njega, blok će se glatko rotirati za 180 stupnjeva dvije sekunde. Kada korisnik ukloni kursor, dogodit će se ista glatka rotacija na originalnu poziciju.
Više na komplikovan način animacija objekta je da odredi sekvencu okvira za njega koristeći svojstva i pravilo @keyframes.
Element (ime-animacije: rotirati; trajanje-animacije: 2s; brojanje-iteracije animacije: beskonačno; funkcija-vremenske-animacije: linearna; ) @keyframes rotirati ( od ( transformacija: rotirati(0deg); ) u ( transformacija: rotirati (360 stepeni); ) )
Animacija rotacije se primjenjuje na navedeni element, specificirajući potpunu rotaciju od 0 do 360 stepeni tokom dvije sekunde. Svojstvo animation-iteration-count svojstvo postavlja animaciju da se ponavlja beskonačno, a animation-timing-function postavlja efekt glatkog prijelaza. Kombinovanje svojstva in sa rotate-transforms omogućava vam da kreirate prelepe dinamičke efekte.
Zbog činjenice da se CSS razvija brzim tempom, stvaranje animacije je postalo još lakše bez njega koristeći Javascript na mnogim stranicama ima vrlo zanimljivih elemenata za koje ne možete a da vas ne zanimaju. U današnjem tutorijalu vidjet ćemo kako možete kreirati animaciju koristeći ključne kadrove (to je čak zanimljivije nego samo korištenje koristeći CSS transformacije). Takođe, naša animacija neće biti samo u jednoj ravni, već će biti sa 3D efektom. Ako ne znate zašto i gdje možete primijeniti takav efekat, idite na cijelu vijest i tamo ću vam reći o tome.
Ako se CSS transformiše iz prethodne serije tutorijala u kojoj je radio Firefox pretraživači, Chrome, Safari i Internet Explorer 10+, tada će pri kreiranju 3D animacije raditi samo u WebKit pretraživačima i Mozilla pretraživač. Većina jednostavne transformacijeće raditi u IE10, ali nešto složenije neće, jer ovaj pretraživač ne podržava opciju konzerviranja-3d za kreiranje 3D slojeva.
CSS animacija
Animacija koju ćemo kreirati će sadržavati sliku koja se rotira oko Y ose:
Odlično?!
Za one koji nemaju animaciju 😉 :
Neki HTML
Sve je jasno i jednostavno u HTML strukturi:
CSS ključni okviri
Šta su ključni kadrovi?
U bloku @keyframes postoji niz pravila koja se nazivaju ključni kadrovi. Ključni okviri sadrže svojstva koja se primjenjuju u određenom trenutku tokom animacije. Tokom animacije, vrijednosti se interpoliraju („glatki prijelaz“ s jedne vrijednosti na drugu) i vidimo samo glatki prijelaz.
Ovo vam može izgledati komplikovano, ali ovo je jedan od najjednostavnijih primjera.
Definirajmo početni i završni ključni kadar:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* WebKit i Opera */ @-webkit-keyframes spinner ( od ( -webkit-transform : rotateY(0deg) ; ) do ( -webkit-transform : rotateY(-360deg) ; )) /* Svi ostali pretraživači */@keyframes spinner ( od ( -moz-transform : rotateY(0deg) ; -ms-transform: rotateY(0deg) ; transform: rotateY(0deg) ;) do ( -moz-transform: rotateY(-360deg) ; -ms- transform : rotateY(-360deg) ; transform: rotateY(-360deg) ; ) ) |
Osim ključnih kadrova, zanima nas i @keyframes spinner, gdje naznačavamo na šta ćemo se pozivati prilikom kasnije animacije, tj. spinner.
Napravite scenu
Potreban nam je element u kojem bi naša animacija dobila volumen i pojavio bi se efekat jačine zvuka. Scena je, za razliku od rotirajuće slike, fiksirana na stranici.
Za scenu ćemo koristiti svojstvo perspektive, koje je novo za nas, koje daje dubinu. Vrijednost je navedena u pikselima. Definira udaljenost od korisnika do elemenata u perspektivi. Znam da je teško odmah shvatiti 🙂 . Smanjimo od 1200px prije 300px i pogledajte rezultat u nastavku:
Odlično?!
I također video:
Povezivanje animacije s elementom
Sada ćete vidjeti još neke nove nekretnine. I čak ne želim da ih odmah prisiljavate da odmah zapamte i razumiju značenja. Možete i drugačije: samo ih pogledate i šta razumete, shvatićete. U stvari, dok dalje proučavate lekcije, često ćete naići na njih i početi shvaćati čemu služe. Stoga, ne brinite zbog činjenice da ih ima puno, a vi nešto ne znate i ne razumijete!
A svojstva su:
| 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 (širina: 250px; visina: 290px; background: url ("http://www..jpg") bez ponavljanja; text-align: center; boja: #fff; margina: 0 auto; -webkit-animation -naziv: spinner; -webkit-animation-time-function: linearna -webkit-animation-iteration-count: beskonačno; -webkit-animation-duration : 6s; animation-name : spinner; /* pokazujući na ključne kadrove animacije pod nazivom "spinner" */ animation-time-function : linearna ; /* funkcija sinhronizacije, koja će se koristiti za transformacije */ animation-iteration-count : beskonačno; /* broj ponavljanja animacije. "beskonačno" znači beskonačno */ trajanje animacije: 6s; /* trajanje animacije */-webkit-transform-style: sačuvaj-3d; -moz-transform-style: sačuvaj-3d; -ms-transform-style: sačuvaj-3d; transform-stil : sačuvaj-3d; /* označava da je ovo 3D transformacija */) #spinner :hover ( -webkit-animation-play-state: pauzirano; animation-play-state: pauzirano; /* zaustavi animaciju */ } |
Svojstva sam potpisao bez prefiksa jer obavljaju slične funkcije, samo za druge pretraživače. Također želim napomenuti da zaustavljamo animaciju koristeći posebno svojstvo animation-play-state kada pređemo mišem preko slike.
