Dinamički CSS: transformirajte objekte

Animacija elemenata stranice može funkcionirati kao neovisni proces ili se izvodi kako bi se vizualizirale akcije posjetitelja. U oba slučaja, CSS transformacija elementa ne utječe na ukupni tijek i izvršava se bez obzira na sadržaj stranice kao cjeline.

Kada se koriste pravila i razvija logika mijenjanja elemenata, upotreba ispravnih vrijednosti svojstava i pravila je vrlo važna. CSS transformacija ne daje developeru mogućnost kontrole. Sve transformacije se izvode prema zadanim funkcijama i njihovim vrijednostima.


Opća pravila transformacije

Logika utjelovljena u ideji transformacijske funkcije, koja se sastoji u iskrivljavanju elementa. Elementi stranice su pravokutno područje, čak i ako je u njemu prikazana glatka grafika. Promjenom veličine stranica ili njihovog pomaka (pomaka) mogu biti:
  • formirana dinamika;
  • stvorena je perspektiva;
  • Volumen izvršen.
  • U svakom slučaju, sve se transformacije odvijaju u ravnini, ali rezultat je moguć u 2D i 3D prikazu. U sljedećem primjeru postoje četiri područja, svaka s CSS - transformacijom.
    Gornji red slika je izvornik, donji red je rezultat korištenja funkcija. Da biste pokazali osnovne značajke, upotrijebite sljedeći opis CSS-a i pokažite umetanje u HTML stranice.
    U ovom primjeru transformacija se događa kada mišem prelazite preko elementa i dodjeljuje se preko pseudo-klase: hover. Što se tičeTransformna svojstva pri korištenju funkcije translate, treba napomenuti da se CSS transformacija može zamijeniti lijevim i gornjim svojstvima. Što se tiče izobličenja funkcije nakošenja - rezultat može biti nepredvidljiv.

    Smatra se da je iskrivljenje rijetko korišteno, ali s ispravnom i sveobuhvatnom primjenom CSS animacije s asimetrijom, bit će moguće izgraditi dinamiku u trodimenzionalnom prostoru kada se kreće element. Na primjer, "svemirska letjelica u orbiti" u kontekstu web stranice može biti kretanje robe u trgovini u prostoru trgovine. 18 Perspektiva transformacije
    Transformacija teksta u CSS može dati poseban učinak u primjeni perspektive. Primjer pokazuje kako se normalni tekstualni prikaz može pretvoriti u pseudo-trihmer.
    Možda to ima smisla u nekim zadacima, ali praktičnost recipročne ideje je očigledna: možete postaviti informacije u budućnosti, a ako se miš zadržite kako biste ih pretvorili u normalan prikaz. Kompaktan je i impresivan.
    Ovi primjeri transformacije opisani su u CSS-u kako slijedi:
    Korištenje svojstva transform-origin omogućuje vam definiranje točke na kojoj će se izvršiti transformacija. Pomicanjem ove točke možete kontrolirati središte za koje se izvodi CSS transformacija. Funkcija rotiranja, iako ima dvije opcije - rotateX i rotateY - ali bez "X" i "Y" ima jedan parametar.
    U svim slučajevima, transformacija elemenata treba biti složena jednostavnim primjerima kako bi se izbjegli neočekivani rezultati. Bolje je prvo ispravno formulirati pravilo i opisati svojstvo zajednostavni element nego odmah uključiti u raspon željenih transformacija. Pravilno formuliranje pravila i CSS svojstava ključ je uspjeha i učinkovitih rezultata.

    Primijeni svojstva animacije

    CSS animacija pomoću animacije i @keyframes nadopunjuje sposobnosti transformacije, dopuštajući joj da se pretvori u stvarnu reprezentaciju kroz kontrolu kontroliranog elementa ili kontroliranu transformaciju njegova oblika.
    Gornja linija elemenata je njihovo normalno stanje. Prvi se stupac pomiče, drugi se rotira, a treći se umanjuje. Prikazano je nekoliko okvira. Za implementaciju ove funkcionalnosti koristi se sljedeći kod:
    Dinamika i duljina procesa mogu se postaviti u animaciji i @keyframes. Dostupna je glatka i postupna promjena procesa. Možete ubrzati jednoličnu promjenu i kretanje.

    Značajke svojstva animacije

    Svojstvo animacije obično se piše u jednom retku. Sadrži osam parametara:
  • animation-name - naziv animacije;
  • trajanje animacije - trajanje animacije (sekunde "s", milisekunde "ms");
  • animacija-timing-funkcija - vrsta animacije (jednostavnost, linearnost, lakoća, lakoća, jednostavnost-out-out, kubna-bezier);
  • broj animacija-iteracija - broj animacija koje se ponavljaju ili beskonačno;
  • smjer animacije - smjer kretanja (normalno, obrnuto, naizmjenično, naizmjenično);
  • animacija-play-state - zaustavljanje animacije (trčanje, pauziranje);
  • kašnjenje animacije - kašnjenje animacije prije reprodukcije (sekunde "s", milisekunda "ms");
  • animation-fill-mode - reproducirajte animaciju izvan određenog vremena reprodukcije (
  • none, naprijed, unatrag, oboje);
  • Pri projektiranju animacije pomoću svojstava animacijeTransformacije su označene u pravilu @keyframes, koje definira slijed transformacije elemenata u koracima.

    Važne opcije animacije

    Svaka animacija ima naziv, trajanje i vrstu. Po nazivu je definiran željeni opis @keyframes, trajanje određuje vrijeme procesa, a tip je varijanta gibanja.
    Ako se koristi potreba za jedinstvenim procesom (gibanje i /ili transformacija), vrijednost je linearna. Ako želite imati ubrzanje na početku - olakšajte, ako na kraju - lako. Jednostavnost je klizanje, a jednostavnost u izlasku je nježnija opcija.
    Vrijednost kubnog-beziera omogućuje vam da formulirate složenu verziju pokreta i izgradite originalniju verziju animacije.
    Na mjestu proizvođača možete odabrati bilo koju standardnu ​​verziju pokreta i osmisliti vlastitu. Kada kliknete na gumb "GO!", Dva kvadrata će se pomicati paralelno i možete uskladiti razlike i vizualizirati željeno ponašanje elementa.

    Stvaranje okvira animacije

    Svojstvo @keyframes je "odrednica" okvira (vidi primjer iznad) kroz koji se element transformira. Ideja o nekretnini je vrlo jednostavna, ali mogućnosti koje ona pruža su ogromne. Proces počinje s 0% i završava sa 100% ukupnog vremena dodijeljenog animaciji. Možete koristiti samo krajnje točke od i do, ili 0% i 100%. Veći učinak može se postići dijeljenjem cijelog procesa animacije /transformacije na mjestu. Veličina parcele može biti bilo koja. Obično se prihvaća nekoliko opcija: 0%, 25%, 50%, 75% i 100%. Ponekad su dovoljna samo tri okvira: 0%, 50% i 100%. Kako to učiniti u svakom slučajuovisi o zadatku i programeru.
    Prilikom konstruiranja bilo koje varijante transformacije, potrebno je promatrati jedno bitno pravilo. Nije uvijek dopušteno koristiti javascript, osobito za programabilnu promjenu svojstava elemenata, na primjer, promijeniti vrijednost svojstva pozadinske slike. HTML, CSS i javascript savršeno se kombiniraju, ali u svim slučajevima morate uzeti u obzir stvarnu funkcionalnost svake od tih komponenti. U idealnom slučaju, kada rade u jasnoj kombinaciji i ne ometaju jedni druge.

    Povezane publikacije