Pogled v 2D transformacije CSS3
The Modul transformacije je izjemen dodatek v CSS3, potrebuje način, kako manipuliramo elemente na spletni strani na naslednjo raven.
Obstaja nekaj poskusov, ki me resnično presenetijo, primeri, kot je ta. Vendar pa ne bomo zgradili nekaj takega kot ikono samo za CSS, ki se lahko nekako spremeni v Autobot, saj je lahko preobremenjena in ni povsem uporabna tudi v resničnem življenju..
Namesto tega bomo tokrat naredili korak nazaj in pregledali osnove CSS3 2D Transformations, da bi videli, kako deluje na temeljni ravni.
Sintaksa
Modul CSS3 Transformations nam v osnovi omogoča preoblikovanje elementa v določeni meri, kot je prevajanje, skaliranje, vrtenje in poševnost.
Uradna sintaksa je transformacija: metoda (vrednost). Vendar pa, tako kot vsi drugi veliki dodatki CSS3, ki so še v zgodnjih fazah, trenutni brskalniki še vedno potrebujejo različico sintakse za izvajanje transformacij. Torej bi bila popolna sintaksa taka:
transform: metoda (vrednost); / * W3C Uradna sintaksa * / -o-transform: metoda (vrednost); / * Opera 10.5+ * / -ms-transform: metoda (vrednost); / * Internet Explorer 9.0+ * / -moz-transform: metoda (vrednost); / * Firefox 3.6+ * / -webkit-transform: metoda (vrednost); / * Chrome / Safari 3.2+ * /
Tudi metoda, ki se nanaša na zgoraj, je transformacijske funkcije, ki jih je mogoče nadomestiti z enim od naslednjih: prevesti(), lestvica (), zavrti () ali poševno ().
Vrednost
Večina vrednosti metode bo ustrezala vrednosti Os X in Y-os. Če se spomnite kartezičnega koordinatnega sistema iz matematičnega razreda v srednji šoli, je osnovno načelo precej podobno, os X predstavlja vodoravno in Y-os predstavlja navpično vrstico.
Razen rotacij. The rotacija bo uporabil polarne koordinate ki je izražena v stopinjah, ki segajo od 0 do 360.
Vrednosti za vse metode so lahko negativne ali pozitivne. Vzemite si beležko, čeprav se spletna stran zaporedno bere od vrha do dna, zaradi česar os Y v spletu deluje nasprotno od prvotnega načela kartezičnih koordinat. To pomeni, da ko dodate negativno vrednost Y-os, namesto tega se bo premaknila na vrh.
Uporaba preoblikovanj
Zdaj pa si oglejmo naslednji osnovni prikaz, da bi videli transformacijo v akciji.
Prevajam
Ne prekrivajte se z izrazom prevesti, ne bo prevajal tujega jezika. The prevesti tukaj je dejansko metoda za premikanje elementov v neki smeri.
Metoda vsebuje dve vrednosti; X in Y. Vrednost X kot smo poudarili zgoraj, bo element vodoravno; levo ali desno, medtem ko Y vrednost jo bo vzela navpično spodaj ali na vrh.
V nadaljevanju si oglejte nekaj preprostih predstavitev:
div širina: 100px; višina: 100px; transform: translate (100px, 250px);
Odrezek zgoraj bo premaknil element za 100px v desno in 250px na dno.
div širina: 100px; višina: 100px; transform: translate (100px, 0);
Zgornji odrezek bo element premaknil desno za 100px, ker osi Y nastavljamo na ničlo. Če želimo element premakniti levo, moramo os X določiti le v negativu, kot sledi:
div širina: 100px; višina: 100px; transform: translate (-100px, 0);
- Predstavitev »Prevedi«
S temi individualnimi metodami lahko element premikamo v eni smeri; translateX () in translateY (), razlika je, da vsaka od teh metod sprejema samo eno vrednost.
Torej, praktično rečeno, transformiraj: prevedi (-100px, 0) je enako transform: translateX (-100px).
II - Lestvica
The lestvice metoda nam omogoča Povečajte ali zmanjšajte dejanske velikosti. Vrednost lestvice je enaka vrednosti prevesti Metoda zgoraj vsebuje tudi X in Y. Edina razlika je, da enote ne podamo. Tukaj je primer:
div širina: 100px; višina: 100px; transformacija: lestvica (1.5);
Zgornji primer bo povečal div 1.5 ali 150% njegove dejanske velikosti, in ker jo enakomerno merimo za smeri X in Y, jo moramo le deklarirati v eni vrednosti. Lahko jo tudi razglasite transformacija: lestvica (1,5,1,5); če želite iti bolj podrobno, bo to storilo enako.
Poleg tega, če želimo zmanjšati element, bi posebej uporabili vrednost od 0,999 do absolutne 0, kot je primer spodaj, ki bo zmanjšala velikost div za 50% ali polovico:
div širina: 100px; višina: 100px; transformacija: lestvica (0.5);
Vendar bodite previdni, če nastavite vrednost kot absolutno “0” div bo izginil, zato, če nimaš utemeljenega razloga za to, ne bi priporočal tega.
- "Scale" demo
III - Zavrti
Kot smo že omenili na tem mestu, je zavrti metoda uporablja polarne koordinate, zato je vrednost navedena v stopinjah. Tukaj sta dva primera
Odrezek spodaj bo zavrtel div 30 stopinj v smeri urinega kazalca.
div širina: 100px; višina: 100px; transform: rotate (30deg);
Negativna vrednost, kot je prikazana v spodnjem primeru, bo zavrtela div v nasprotni smeri (v nasprotni smeri urinega kazalca) na isti stopnji.
div širina: 100px; višina: 100px; transform: rotate (-30deg);
- "Rotate" demo
IV - Nakriv
The poševno Metoda nam omogoča ustvarjanje neke vrste paralelograma. Vsebuje tudi dve vrednosti osi X in Y. Vendar pa je sama vrednost navedena v stopnji, namesto linearnih meritev, kot jih uporabljamo za lestvice ali prevesti metodo. Tukaj je primer:
div širina: 200px; višina: 100px; transform: skew (30deg, 10deg);
- "Skew" demo
V - večkratna metoda
The transform lastnost ni omejena na obravnavo samo ene metode, dejansko lahko v posamezne deklaracije vključimo več metod, na primer:
div širina: 100px; višina: 100px; transform: translateX (100px) vrtenje (45deg);
Zgornji odrezek bo element 100px premaknil v desno in se obenem obrnil za 45 stopinj.
Predstavitev »Več načinov«.
Izvor preoblikovanja
The transfrom - kot nakazuje njegovo ime - se uporablja za nadzor izhodiščne točke transformacije. Če te lastnosti izrecno ne deklariramo z naslednjo sintakso izvor transformacije: X Y;, potem bo brskalnik prevzel privzeto vrednost, ki je 50% za X in 50% za Y.
Zdaj, če določimo transformacije do 0 (X) 0 (Y) se bo transformacija začela na zgornji levi strani.
Ponovno, vsi brskalniki še vedno potrebujejo predpono, da jo imenujejo. Torej, tukaj je popolna različica, ki zagotavlja, da deluje v večini trenutnih brskalnikov:
-izvor webkit-transform-a: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; izvor transformacije: X Y;
- "Transform-origin" demo
Zaključek
Prišli smo skozi vse štiri bistvene metode preoblikovanja; prevajati, meriti, vrteti in nagniti
Vendar, kot že omenjeno, je ta modul še vedno v začetni fazi, tako da, če boste uporabili te metode na vaši naslednji spletni strani, se prepričajte, da se dobro razgradi za nezdružljive brskalnike (tukaj ne govorim o IE6).
Končno si lahko ogledate celoten demo ali prenesete vir iz naslednjih povezav.
- Demo
- Prenesi vir
