Dinamički CSS: transformacija objekata

Animacija elemenata stranice može funkcionirati kao samostalni proces ili biti izvedena radi vizualizacije akcija posjetitelja. U svakom slučaju, CSS transformacija elementa ne utječe na ukupni protok i izvršava se bez obzira na sadržaj stranice kao cjeline.

Kada koristite pravila i razvijajte logiku za mijenjanje elemenata, upotreba pravih vrijednosti svojstava i pravila je vrlo važna. CSS-transformacija ne pruža razvojnom programeru mogućnosti upravljanja. Sve se transformacije izvode prema zadanim funkcijama i njihovim vrijednostima.

Opća pravila transformacije

Logika ostvarena u ideji transformacijske funkcije je izobličenje elementa. Elementi stranice - je pravokutna površina, čak i ako zastupa glatke grafike unutar njega.

Mijenjanjem dimenzija stranica područja ili njihovo pomicanje (pomicanje) može biti:

• formirana je dinamika;
• izgleda se formira;
• volumen je ispunjen.

U svakom slučaju, sve se transformacije pojavljuju na ravnini, ali rezultat je moguć i u 2D i 3D mapiranju.

Sljedeći primjer prikazuje četiri područja, svaki s CSS transformacijom.

Vrh redaka slika je izvorni, donji redak je rezultat primjene funkcija. Pokazati sposobnost da koriste osnovne CSS i sljedeći opis prikazuje umetak na stranicama HTML-koda.

U ovom primjeru, transformacija se događa kada mišem preko elementa i dodijelite ga mišem za pseudo klase.

Što se tiče svojstava koriste prevesti transformirati funkciju treba napomenuti da je CSS-transformacija može zamijeniti svojstva lijevoj strani i vrhu. Što se tiče iskrivljenja od preskakanja funkcije - rezultat možda nije predvidljiv.

Vjeruje se da se skew rijetko koristi, ali s pravilnom i složenom primjenom CSS-animacija s skew omogućit će izgradnju dinamike u trodimenzionalnom prostoru kada se element kreće. Na primjer, "svemirska letjelica u orbiti" u kontekstu web stranice može biti kretanje robe kroz trgovinu u trgovini.

Perspektiva u transformaciji

Transformacija teksta u CSS može dati poseban efekt pri primjeni perspektive. Primjer pokazuje kako se normalno prikazivanje teksta može pretvoriti u pseudo-3D tekst.

Možda to ima smisla u nekim problemima, ali je praktičnost obrnute ideje očigledna: možete staviti informaciju u perspektivu, a kada se lebdete iznad njega, miš se pretvara u normalan prikaz. Kompaktan je i učinkovit.

Ti primjeri transformacije opisani su u CSS kako slijedi:

Korištenje svojstva transformacije-izvora omogućuje vam da odredite točku na kojoj će se transformacija odvijati. Premještanjem ove točke možete upravljati središtem, u odnosu na koju se izvršava transformacija CSS-a.

Funkcija rotacije ima dvije opcije - rotateX i rotateY - ali bez "X" i "Y" ima jedan parametar.

U svim slučajevima, transformacija elemenata trebala bi se ispraviti na jednostavnim primjerima kako bi se izbjegao neočekivan rezultat. Bolje je prvo pravilno oblikovati pravilo i opisati imovinu za jednostavni element nego uključiti odmah u spektar željenih transformacija. Ispravna formulacija pravila i svojstava u CSS-u ključ je za uspjeh i učinkovite rezultate.

Primjena animacijskog entiteta

CSS animacija putem animacije i @keyframes nadopunjuje mogućnosti transformacije, dopuštajući da se ona pretvori u pravi prikaz putem kontroliranog kretanja elementa ili kontrolirane transformacije njegovog oblika.

Glavna linija elemenata je njihovo normalno stanje. Prvi stupac se pomiče, drugi stupac rotira, a treći stupac vage. Prikazuje nekoliko okvira. Da biste implementirali ovu funkcionalnost, koristi se sljedeći kôd:

Dinamika i trajanje procesa mogu se postaviti u animaciji i @keyframes. Dostupna je postupna i postupna promjena procesa. Možete primijeniti jednoliku promjenu i kretanje s ubrzanjem.

Animacija značajke nekretnina

Animacija je obično zapisana u jednoj liniji. To uključuje osam parametara:

• animacija - naziv animacije;
• trajanje animacije - trajanje animacije (sekundi "s", milisekundi "ms");
• animacija-vrijeme-funkcija - vrsta animacije (lakoća, linearna, jednostavnost, jednostavnost, jednostavnost u izlasku, kubični bezier);
• animacija-iteracija - broj - broj ponavljanja animacije ili beskonačnost;
• smjer animacije - smjer kretanja (normalni, unatrag, alternativni, alternativni-unatrag);
• animation-play-state - zaustavljanje animacije (trčanje, pauzirano);
• animacija kašnjenja - kašnjenje animacije prije početka reprodukcije (sekundi "s", milisekundi "ms");
• animacija-punjenje-način - igrati animaciju izvan određenog vremena reprodukcije (
• ništa, naprijed, unatrag, oboje);

Kada izradite animaciju animacijom, transformacijska svojstva navedena su u pravilu @keyframes, koja određuje redoslijed transformacije elementa u koracima.

Važne opcije animacije

Svaka animacija ima naziv, trajanje i vrstu. Naziv definira traženi opis @keyframesa, duljina određuje vrijeme procesa, a vrsta određuje varijantu kretanja.

Ako je potreban jednoliki postupak (gibanje i / ili transformacija), linearna vrijednost se koristi. Ako želite ubrzati na početku - jednostavnost, ako na kraju - jednostavnost. Jednostavno olakšava klizanje, a jednostavnost izlaženja je njegova glatkija inačica.

Vrijednost kubičnog beziera omogućuje vam formuliranje složene inačice pokreta i izraditi originalniju inačicu animacije.

Na web mjestu proizvođača možete odabrati bilo koju standardnu ​​opciju prometa i dizajnirati vlastiti. Kada kliknete gumb "GO!", Dva kvadrata će se kretati paralelno i možete usporediti razlike i vizualno oblikovati željeno ponašanje elementa.

Izgradnja okvira animacije

Entitet @keyframes je "odrednica" okvira (vidi gore navedeni primjer) kroz koji se element pretvara. Ideja imovine je vrlo jednostavna, ali pruža ogromne mogućnosti.

Postupak počinje na 0% i završava na 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 u odjeljke. Korak stranice može biti bilo koji.

Obično se prihvaća nekoliko opcija: 0%, 25%, 50%, 75% i 100%. Ponekad je dostatno samo tri okvira: 0%, 50% i 100%. Kako postupati u svakom slučaju, ovisi o zadatku i razvojnom programeru.

Prilikom konstruiranja bilo koje inačice transformacije potrebno je poštovati jedno važno pravilo. To nije uvijek moguće koristiti jаvascript, posebice promjene u svojstvima programabilnih elemenata, kao što su promjenom vrijednosti svojstva pozadine-slike.

HTML, CSS i jаvascript savršeno se kombiniraju, ali u svim slučajevima morate uzeti u obzir stvarne funkcije svake od ovih komponenti. U idealnom slučaju, kada rade u jasnoj kombinaciji i ne miješaju se jedni s drugima.