Tretja različica Cascading Style Sheets je prinesla nove lastnosti objektov spletne strani. To je priložnost za ustvarjanje blokov z gladkimi koti, prilagajanje senc, dodajanje preglednosti in gradient, nastavitev animacije. O slednjem je treba omeniti še več. Če prej, da bi ustvarili iluzijo gibanja na straneh dodane gif datoteke, ki so bile potrebne za prilagajanje, potem zdaj atribut transformacija CSS opravi vse akcije za animacijo objektov samodejno. Ostaja, da se naučite, kako ga uporabljati.

Posebnosti uporabe lastnosti

Običajno se transformacija objektov uporablja z miško, ki leži na njih. Podan je za psevdo-razred z imenom: hover. Spremembe vplivajo samo na en element spletne strani brez vpliva na druge. Obravnavani parameter stila se pogosto zamenjuje z drugim - preoblikovanjem besedila. CSS jasno razmeji te atribute. Slednji določa slog pisanja besedila in velja samo za odstavke spletne strani, medtem ko se transformacija v čisti obliki uporablja za vse elemente.

Vsakemu predmetu lahko dodate:

premikanje po ravni črti (vodoravno, navpično, diagonalno);

zavoj (poseben primer - naklon);

skaliranje;

kombinacija teh učinkov.

Poleg iluzije gibanja treh vrst, lastnost vam omogoča, da določite refleksijo, pristranskost in perspektivo. Za napredni parameter je podan v obliki matrike. Transformacija se izvede glede na sredino elementa. Če je potrebno, referenčno točkopremaknjeno Parameter transformacijskega izvora: a b c premakne središče objekta glede na tridimenzionalni koordinatni sistem xyz.

Horizontalno gibanje

Najpreprostejša oblika gibanja vodoravno, to je na levo in desno vzdolž osi x. Za svojo nalogo se uporablja vrednost lastnosti translate (x, y). Ker se mora element premakniti samo v eno smer, je y koordinata y nastavljena na 0. Vendar pa mora biti koordinata x dodeljena določeni vrednosti v slikovnih pikah, ki ji je predmet treba premakniti. Negativna vrednost - premik v levo, pozitivno - desno. Vendar preprosta navedba transformacije CSS ne bo ustvarila iluzije gibanja. Rešitev je dodati atribut prehoda opisu objekta. Delovni primer premikanja elementa v desno od 125 pik je prikazan spodaj.

Vrstica prehodne kode: vse 2 sekunde pomeni:

vse - nastavljena vrednost velja za vse parametre objekta;

2 s - trajanje učinka je 2 sekundi;

počasnost - na začetku in koncu.

Premik gor /dol

Vrednost translate (x, y) se uporablja za nastavitev animacije navpično. V tem primeru je koordinata x enaka nič in y je dodeljena velikost odmika. Premikanje navzgor - negativno, navzdol - pozitivno. Lastnost transformacijskega CSS-ja za zgornji razred v spodnjem primeru prikazuje gladko premikanje objekta iz koordinatne točke (0; 0) za 80 pik navzgor. Spodnji razred določa nasprotno smer gibanja - za 80 pik navzdol. Animacija v primeru je izvedena s konstantno hitrostjo, kot kaže linearna vrednost.

Diagonalna pot

Če združimo transformacije, ki jih obravnava transformacija, so CSS-primeri za diagonalno gibanje preprosti. V atributu so vrednosti nastavljene za obe koordinati. Odmik razdalje je podan s piksli. Kje se bo objekt premaknil - je odvisno od znakov. Obstajajo štiri možnosti:

x, y pozitivno - desno navzdol gibanje;

x, y negativno - gibanje na glavo;

x - pozitivno, y - negativno - premikanje navzgor;

x - negativno, y - pozitivno - gibanje levo navzdol.

Če želite premagati značilnosti pretvorbe, bo CSS pomagal zgled. Če je pristranskost izvedena na istem številu slikovnih pik (npr. 32), zadostuje, da se navede samo ena številka. To pomeni, da prevod prevodaustreza prevodu (3232).

Rotacija

Po obravnavi možnih načinov gibanja preidemo na naslednjo vrsto transformacije - rotacijo. Rotacija nastavi vrednost r otate (Xdeg), kjer je X - stopinje (od 0 do 360), na katero predmet odstopa od prvotnega položaja.
Še vedno je treba razumeti smer vrtenja. Vrsta rotacije se določi z znaki: plus - v smeri urinega kazalca, minus - proti Po želji lahko kombinirate obe vrsti vrtenja - glejte spodnji primer.

Spreminjanje velikosti

Ta vrednost dodaja skaliranje elementa: lestvica (a, b). Črke v oklepajih so širina in višina objekta. Če želite povečati velikost sorazmerno trikrat, je dovolj, da napišete lestvico
. Zmanjšajte dimenzije števila, ki je manjše od enega. Atribut CS-preoblikovanja se lahko uporabi samo za lestvico X ali samo zavertikalna lestvica Y Če so podane negativne vrednosti za lestvico Y, se bodo pojavili zanimivi učinki refleksije in sence.

Preoblikovanje besedila

Novinci so zamenjali premoženje pretvorbe, ki se preučuje, z atributom CSS za besedilno transformacijo. Opozarjamo vas, da ta možnost velja samo za besedilo. Nadzoruje značaj odstavka odstavka znaka. Na primer, ko nastavite male črke, se besedilo pretvori v majhne črke, velike črke - v veliko črko (podobno tipki CapsLock na tipkovnici). Za besede, ki se začnejo z velikimi črkami, so lastnosti dodeljene kapitalizaciji. V nasprotju s preoblikovanjem objektov transformacija besedila podpira mehanizem dedovanja. Pretvorbe simbolov so dodeljene razredom, ki so odgovorni za izpisovanje glav, kar je praktično v praksi, saj ni potrebe po spremljanju metode zapisovanja. Pri vsakem črkovanju bodo vsi besedilni bloki na spletni strani prikazani na enak način.