Pogled u CSS3 2D transformacije
Modul transformacije je ogroman dodatak u CSS3, potrebno je način na koji manipuliramo elementima na web stranici na sljedeću razinu.
Postoje neki eksperimenti koji me zaista zadivljuju, primjeri poput ovog. Međutim, nećemo graditi nešto poput CSS-ikone koja se nekako može pretvoriti u Autobot, jer može biti preplavljujuća i ne baš upotrebljiva u stvarnom životu.
Umjesto toga, ovaj put ćemo se povući i pregledati osnove CSS3 2D Transformacija kako bismo vidjeli kako funkcionira na fundamentalnoj razini.
Sintaksa
Modul CSS3 Transformations nam u osnovi omogućuje transformaciju elementa u određenoj mjeri, kao što je prevođenje, skaliranje, rotiranje i iskrivljavanje.
Službena sintaksa je transformacija: Metoda (vrijednosti). Međutim, kao i svi drugi CSS3 veliki dodaci koji su još uvijek u ranim fazama, trenutačni preglednici još uvijek trebaju verziju sintakse za izvođenje transformacija. Dakle, kompletna sintaksa će se pojaviti na sljedeći način:
transformacija: metoda (vrijednost); / * W3C Službena sintaksa * / -o-transform: metoda (vrijednost); / * Opera 10.5+ * / -ms-transform: metoda (vrijednost); / * Internet Explorer 9.0+ * / -moz-transform: metoda (vrijednost); / * Firefox 3.6+ * / -webkit-transform: metoda (vrijednost); / * Chrome / Safari 3.2+ * /
Isto tako, metoda o kojoj govorimo gore je transformirati-funkcije, koji se mogu zamijeniti jednim od sljedećeg: Prevedi(), skala (), rotirati() ili ukošenje ().
Vrijednost
Većina vrijednosti metode odgovarat će Apscisa i Y-osa. Ako se sjećate kartezijanskog koordinatnog sustava iz vašeg Math razreda u srednjoj školi, osnovni princip je vrlo sličan, X-os predstavlja vodoravan i Y-osa predstavlja vertikala crta.
Osim za rotacije. rotacija će koristiti polarne koordinate koji je izražen u stupnjevima koji se kreću od 0 do 360.
Vrijednosti za sve metode mogu biti i negativne ili pozitivne. Samo uzmite bilješku, jer se web stranica čita sekvencijalno od vrha do dna, što čini os Y u webu suprotnom od izvornog principa kartezijanskih koordinata. To znači da kada dodate negativnu vrijednost u Y-osa, umjesto toga premjestit će se na vrh.
Korištenje transformacija
Sada ćemo vidjeti sljedeću osnovnu demonstraciju kako bismo vidjeli transformaciju u akciji.
Ja prevodim
Nemojte se zamutiti izrazom Prevedi, neće prevoditi strani jezik. Prevedi ovdje je zapravo metoda za pomicanje elemenata u nekom smjeru.
Metoda sadrži dvije vrijednosti; x i Y. X vrijednost kao što smo gore istaknuli, element će uzeti vodoravno; lijevo ili desno, dok Y vrijednost će je uzeti vertikalno na dnu ili na vrhu.
Sada ćemo vidjeti neke jednostavne demonstracije u nastavku:
div širina: 100px; visina: 100px; transform: translate (100px, 250px);
Gornji isječak premjestit će element za 100px udesno i 250px na dno.
div širina: 100px; visina: 100px; transform: translate (100px, 0);
Gornji isječak će premjestiti element desno za 100 piksela, jer smo nulirali os Y. Zatim, ako želimo pomaknuti element ulijevo, potrebno je postaviti os X na negativan način kako slijedi:
div širina: 100px; visina: 100px; transform: translate (-100px, 0);
- Demo "Prevedi"
Alternativno, u mogućnosti smo pomicati element u jednom smjeru s tim pojedinačnim metodama; translateX () i translateY (), razlika je da svaka od tih metoda prihvaća samo jednu vrijednost.
Dakle, praktično govoreći, transformiraj: prevedi (-100px, 0) također je jednako transformiraj: translateX (-100px).
II - Skala
ljestvica metoda omogućuje nam Povećajte ili smanjite elementima iz njegove stvarne veličine. Vrijednost skale je ista kao vrijednost Prevedi gore navedenu metodu, ona također sadrži X i Y. Jedina razlika je što ne navodimo jedinicu. Evo primjera:
div širina: 100px; visina: 100px; transformacija: mjerilo (1.5);
Gornji primjer će povećati div 1.5 ili 150% njegove stvarne veličine, i budući da je podjednako skaliramo za oba smjera X i Y, trebamo ga samo deklarirati u jednoj vrijednosti. Također ga možete proglasiti na ovaj način transformacija: mjerilo (1,5,1,5); ako želite više detalja, učinit će isto.
Nadalje, ako želimo smanjiti element, posebno ćemo upotrijebiti vrijednost od 0,999 do apsoluta 0, kao primjer u nastavku, koji će smanjiti veličinu DIV-a za 50% ili polovicu:
div širina: 100px; visina: 100px; transformacija: mjerilo (0.5);
Ali budite oprezni ako postavite vrijednost na apsolutnu vrijednost “0” div samo će nestati, tako da ako nemate valjani razlog za to, ne bih vam preporučio da to učinite.
- "Scale" demo
III - Rotiranje
Kao što smo ranije spomenuli u ovom postu, rotirati metoda koristi polarne koordinate, tako da je vrijednost navedena u stupnjevima. Evo dva primjera
Isječak u nastavku rotira div 30 stupnjeva u smjeru kazaljke na satu.
div širina: 100px; visina: 100px; transformacija: rotiranje (30deg);
Negativna vrijednost, kao što je prikazano u donjem primjeru, rotira div u suprotnom smjeru (suprotno od kazaljke na satu) u istom stupnju.
div širina: 100px; visina: 100px; transformacija: rotiranje (-30deg);
- "Rotiraj" demo
IV - Iskrivljenost
iskrivljavati Metoda omogućuje stvaranje neke vrste paralelograma. Također sadrži dvije vrijednosti X i Y osi. Međutim, sama vrijednost se navodi u stupnjevima, umjesto linearnim mjerenjima kakve koristimo za ljestvica ili Prevedi metoda. Evo primjera:
div širina: 200px; visina: 100px; transformacija: izvrtanje (30deg, 10deg);
- "Skew" demo
V - Višestruka metoda
transformirati svojstvo nije ograničeno na rukovanje samo jednom metodom, u stvari možemo uključiti više metoda u pojedinačne deklaracije, kao što je ovaj:
div širina: 100px; visina: 100px; transformacija: translateX (100px) rotirati (45deg);
Gornji isječak će pomaknuti element 100px udesno i istovremeno će se rotirati za 45 stupnjeva.
"Multiple Method" demo.
Izvor transformacije
transfrom-podrijetla - kao što njegovo ime implicira - koristi se za kontrolu početne točke transformacije. Ako izričito ne deklariramo ovo svojstvo sa sljedećom sintaksom podrijetlo transformacije: X Y;, tada će preglednik uzeti zadanu vrijednost koja je 50% za X i 50% za Y.
Sada, ako odredimo transformirati-podrijetlo do 0 (X) 0 (Y) transformacija će početi na vrhu lijevo.
Ponovno, svim preglednicima je potrebna prefiksna verzija da bi nazvala ovo svojstvo. Dakle, ovdje je potpuna verzija kako bi se osiguralo da radi u većini trenutnih preglednika:
-podrijetlo webkit-transformacije: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; podrijetlo transformacije: X Y;
- Demo "Transform-origin"
Zaključak
Prošli smo kroz sve četiri bitne metode transformacije; prevoditi, mjeriti, rotirati i iskriviti
Međutim, kao što je spomenuto, ovaj je modul još uvijek u ranoj fazi, pa ako te metode primijenite na sljedećoj web-lokaciji, provjerite da li se graciozno degradira za nekompatibilne preglednike (ovdje ne mislim na IE6).
Konačno, možete pogledati sve demo datoteke ili preuzeti izvor iz sljedećih linkova.
- Demo
- Preuzimanje izvora
