Pretvorite CSS: Teorija i primjeri transformacije objekata

Treća verzija kaskadnih listova stilova uvela je nova svojstva za objekte web stranica. To je mogućnost stvaranja blokova s ​​uglađenim kutovima, podešavanje sjena, dodavanje prozirnosti i gradijenta, postavljanje animacije. Potonje je vrijedno spomenuti detaljnije. Ako je ranije, da bi se stvorila iluzija kretanja, na stranice dodane gif-datoteke, koje je moralo biti posebno nacrtano, onda sada transformacijski CSS atribut obavlja sve akcije za animiranje objekata automatski. Ostaje naučiti kako ga koristiti.

Značajke objekta

Obično se objektima pri pretvaranju miša pribjegava. Postavljen je za pseudo klasu pod nazivom : hover . Promjene utječu samo na jedan element web-stranice, bez utjecaja na ostatak.

Razmatrani parametar stilova često se miješa s drugim - tekstualnom transformacijom . CSS jasno razlikuje ove atribute. Potonji definira stil pisanja teksta i primjenjuje se samo na paragrafe web stranice, dok se transformacija u čistom obliku koristi za sve elemente.

Možete dodati bilo kojem objektu:

• kretanje po ravnoj liniji (vodoravno, okomito, dijagonalno);
• rotacija (poseban slučaj - nagib);
• skaliranje;
• kombinacija navedenih učinaka.

Osim iluzije kretanja tri vrste, svojstvo vam omogućuje da postavite refleksiju, pomak i perspektivu. Za napredne, parametar se daje u obliku matrice.

Transformacija se izvodi u odnosu na središte elementa. Ako je potrebno, referentna točka se pomiče. Parametar transformacijskog izvora: a b c pomiče središte objekta u odnosu na trodimenzionalni xyz koordinatni sustav .

Horizontalno kretanje

Najjednostavniji tip kretanja je vodoravno, tj. Lijevo-desno ili duž x- osi. Da biste ga postavili, upotrijebite vrijednost svojstva translate ( x, y) .

Budući da se element mora kretati samo u jednom smjeru, y koordinata je postavljena na y = 0. No koordinatama x treba dodijeliti određenu vrijednost u pikselima pomoću koje bi se objekt trebao pomaknuti. Negativna vrijednost - kretanje lijevo, pozitivno - desno.

Ali jednostavno navođenje transformacije CSS neće stvoriti iluziju kretanja. Rješenje je dodavanje atributa prijelaza opisu objekta. Radni primjer za premještanje elementa 125 piksela udesno je prikazan ispod.

Kôd za prijelaz linije : sve 2 sekunde za jednostavno izlaženje znači:

• sve - postavljena vrijednost primjenjuje se na sve parametre objekta;
• 2 s - trajanje učinka 2 sekunde;
• jednostavnost u izlazu - usporeno kretanje na početku i na kraju.

Pomakni se prema dolje

Vrijednost translate ( x, y) se koristi za podešavanje animacije okomito. U tom slučaju koordinata x jednaka je nuli, a y je dodijeljena veličina pomaka. Kretanje prema gore je negativna vrijednost, dolje je pozitivna vrijednost.

Svojstvo pretvorbe CSS-a za klasu gore u primjeru ispod pokazuje glatko kretanje objekta iz točke s koordinatama (0; 0) 80 piksela prema gore. Klasa dolje određuje suprotan smjer kretanja - 80 piksela prema dolje.

Animacija u primjeru se izvodi s konstantnom brzinom, što pokazuje vrijednost linearnog .

Dijagonalni potez

Ako kombinirate razmatrana kretanja definirana transformacijom, CSS primjeri za dijagonalno kretanje dobivaju se jednostavno.

Atribut postavlja vrijednosti za obje koordinate. Udaljenost odmaka prikazana je u pikselima. Gdje će se objekt kretati ovisi o znakovima. Moguće su četiri opcije:

• x , y pozitivno - pomaknite se dolje na desno;
• x , y negativno - pomaknite se lijevo gore;
• x - pozitivno, y - negativno - kretanje prema gore u desno;
• x - negativno, y - pozitivno - pomaknite se lijevo dolje.

Primjer će pomoći kod CSS značajki transformacije .

Ako se pomak duž obje osi izvodi istim brojem piksela (npr. 32), dovoljno je navesti jedan broj. To jest, translate (32) odgovara translatu (32, 32).

rotacija

Nakon razmatranja mogućih načina pomaka, prelazimo na sljedeću vrstu transformacije - rotaciju. Rotacija postavlja vrijednost rate (Xdeg) , gdje je X stupnjevi (od 0 do 360) kojima objekt odstupa od svojeg izvornog položaja.

Ostaje razumjeti smjer vrtnje. Vrsta rotacije određena je znakovima: plus - u smjeru kazaljke na satu, minus - protiv. Ako želite, možete kombinirati obje vrste rotacije - pogledajte primjer u nastavku.

promjena veličine

Sljedeća vrijednost dodaje skaliranje elementa: skala ( a , b ) . Slova u zagradama su širina i visina objekta. Ako želite povećati veličinu proporcionalno tri puta, dovoljno je napisati skalu (3) . Smanjite dimenzije broja manje od jednog.

Unos atributa CSS atributa t ransform može se primijeniti samo na horizontalnu ljestvicu X ili samo na okomitu skalu Y. Zanimljivi efekti refleksije i sjene dobivaju se ako se za skalu Y daju negativne vrijednosti.

Transformacija teksta

Početnici zbunjuju svojstvo transformacije s tekstualnim tekstualnim atributom CSS. Zapamtite, ovaj se parametar odnosi samo na tekst. Koristi se za kontrolu slučaja pisanja odlomka znakova. Primjerice, nakon instaliranja malih slova, tekst se pretvara u mala slova, velika slova - u velika slova (poput pritiskanja tipke CapsLock na tipkovnici). Da bi se riječi počele s velikim slovom, dodijeljeno im je veliko slovo.

Za razliku od transformacije objekta, transformacija teksta podržava mehanizam nasljeđivanja. Pretvorba znakova dodjeljuje se klasama koje su odgovorne za prikazivanje zaglavlja, što je praktično praktično, budući da nema potrebe za praćenjem metode snimanja. Pod bilo kojom varijantom pravopisa, svi blokovi teksta pojavit će se na web stranici na isti način.