Pretvorite CSS: Teorija in primeri preoblikovanja objektov

Tretja različica kaskadnih listov slogov je uvedla nove lastnosti za objekte spletne strani. To je zmožnost ustvarjanja blokov z gladkimi koti, prilagajanje senc, dodajanje preglednosti in gradient, nastavitev animacije. Slednje je treba podrobneje omeniti. Če bi prej, da bi ustvarili iluzijo gibanja, gif-datoteke dodali na strani, ki jih je bilo treba posebej narisati, potem zdaj transformacijski CSS atribut samodejno izvede vsa dejanja za animiranje objektov. Ostaja, da se naučite, kako ga uporabljati.

Lastnosti nepremičnine

Običajno se pri preoblikovanju miške uporabijo predmeti. Nastavljen je za psevdo razred z imenom : hover . Spremembe vplivajo samo na en element spletne strani, ne da bi to vplivalo na ostale.

Obravnavani parameter stilov se pogosto zamenjuje z drugim - preoblikovanjem besedila . CSS jasno razlikuje med temi atributi. Slednji definira slog pisanja besedila in velja samo za odstavke spletne strani, medtem ko se transformacija v čisti obliki uporablja za vse elemente.

Dodate lahko katerem koli predmetu:

• premikanje po ravni črti (vodoravno, navpično, diagonalno);
• rotacija (poseben primer - nagib);
• luščenje;
• kombinaciji navedenih učinkov.

Poleg iluzije gibanja treh vrst, lastnost vam omogoča, da nastavite razmislek, premik in perspektivo. Za napreden je parameter podan v obliki matrike.

Transformacija se izvede glede na sredino elementa. Če je potrebno, se referenčna točka premakne. Parameter transformacijskega izvora: a b c premakne središče objekta glede na tridimenzionalni koordinatni sistem xyz .

Horizontalno gibanje

Najenostavnejši tip gibanja je vodoravno, tj. Levo-desno ali vzdolž osi x . Za nastavitev uporabite vrednost prevajanja lastnosti ( x, y) .

Ker se mora element premakniti le v eno smer, je koordinata y nastavljena na y = 0. Vendar je treba koordinati x dodeliti določeno vrednost v slikovnih pikah, s katero naj se objekt premakne. Negativna vrednost - premik v levo, pozitivno - desno.

Toda preprosto določanje transformacije CSS ne bo ustvarilo iluzije gibanja. Rešitev je dodati opis prehoda atributu prehoda . Delovni primer za premik elementa 125 slikovnih pik v desno je prikazan spodaj.

Koda prehoda: vse 2 sekunde pomeni:

• vse - nastavljena vrednost se uporablja za vse parametre objekta;
• 2 s - trajanje učinka 2 sekundi;
• lahkotnost v izhodu - počasno gibanje na začetku in na koncu.

Premaknite se navzdol

Vrednost translate ( x, y) se uporablja za navpično nastavitev animacije. V tem primeru je koordinata x enaka nič in y je dodeljena velikost premika. Premikanje navzgor je negativna vrednost, navzdol je pozitivna vrednost.

Lastnost pretvorbe CSS za razred v spodnjem primeru prikazuje gladko premikanje predmeta iz točke s koordinatami (0; 0) 80 pik navzgor. Razred navzdol določa nasprotno smer gibanja - 80 pik navzdol.

Animacija v primeru je izvedena s konstantno hitrostjo, kar kaže vrednost linearnega .

Diagonalni premik

Če združimo obravnavana gibanja, ki jih opredeljuje transformacija, dobimo CSS primere za diagonalno gibanje preprosto.

Atribut nastavi vrednosti za obe koordinati. Odmik odmika je podan v slikovnih pikah. Kjer se bo objekt premaknil, je odvisno od znakov. Možne so štiri možnosti:

• x , y pozitivno - pomaknite se navzdol na desno;
• x , y negativno - premaknite levo navzgor;
• x - pozitivno, y - negativno - premikanje navzgor;
• x - negativno, y - pozitivno - premaknite levo navzdol.

Primer bo pomagal pri preoblikovanju CSS funkcij.

Če premik vzdolž obeh osi opravi isto število pik (na primer 32), je dovolj, da podate eno številko. To pomeni, da prevod (32) ustreza prevodu (32, 32).

Rotacija

Ko se upoštevajo možni načini premika, preidemo na naslednjo vrsto transformacije - rotacijo. Vrtenje nastavi vrednost r otate (Xdeg) , kjer je X stopinje (od 0 do 360), po katerih predmet odstopa od svojega prvotnega položaja.

Še vedno je treba razumeti smer vrtenja. Vrsta vrtenja je določena z znaki: plus - v smeri urinega kazalca, minus - proti. Po želji lahko kombinirate obe vrsti vrtenja - glejte spodnji primer.

Spreminjanje velikosti

Naslednja 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 (3) . Zmanjšajte dimenzije števila, ki je manjše od enega.

Vnos atributa CSS atribut t ransform lahko uporabite samo za vodoravno lestvico X ali samo za vertikalno lestvico Y. Če dobimo negativne vrednosti za lestvico Y, dobimo zanimive učinke refleksije in sence.

Pretvorba besedila

Začetniki zamenjujejo lastnost pretvorbe z atributom CSS za besedilno preoblikovanje besedila . Ne pozabite, ta parameter velja samo za besedilo. Uporablja se za nadzor pisanja odstavka znakov. Po namestitvi malega besedila se na primer besedilo pretvori v male črke, velike črke - do velikih črk (kot je pritisk na tipko CapsLock na tipkovnici). Če želite, da se besede začnejo z veliko črko, je lastnost dodeljena z veliko začetnico .

Za razliko od pretvorbe objektov, transformacija besedila podpira mehanizem dedovanja. Pretvorba znakov je dodeljena razredom, ki so odgovorni za prikazovanje naslovov, kar je v praksi priročno, saj ni potrebe po spremljanju metode zapisovanja. Pod vsako različico črkovanja se bodo vsi bloki besedila prikazali na spletni strani na enak način.