Pozrite sa do 2D transformácií CSS3
Transformačný modul je obrovský prírastok v systéme CSS3, to znamená, že manipulujeme s elementmi na webovej stránke na ďalšiu úroveň.
Existujú nejaké experimenty, ktoré ma naozaj prekvapia, príkladmi ako je tento. Nebudeme však stavať niečo ako ikonu CSS, ktorá sa môže nejako zmeniť na Autobot, pretože môže byť ohromujúca a nie je docela použiteľná aj v reálnom živote.
Namiesto toho tentokrát budeme krok za krokom a preskúmať základy CSS3 2D Transformations, aby ste zistili, ako funguje na základnej úrovni.
Syntax
Modul CSS3 Transformations nám v podstate umožňuje transformovať prvok do určitej miery, ako je napríklad prekladanie, zmenšovanie, otáčanie a sklopenie.
Oficiálna syntax je transformácie: Metóda (hodnota). Avšak, rovnako ako všetky ostatné CSS3 skvelé doplnky, ktoré sú ešte v počiatočných fázach, súčasné prehliadače stále potrebujú verziu syntaxe na spustenie transformácií. Takže úplná syntax sa ukáže takto:
transformácia: metóda (hodnota); / * W3C Oficiálna syntax * / -o-transform: metóda (hodnota); / * Opera 10.5+ * / -ms-transform: metóda (hodnota); / * Internet Explorer 9.0+ * / -moz-transform: metóda (hodnota); / * Firefox 3.6+ * / -webkit-transform: metóda (hodnota); / * Chrome / Safari 3,2+ * /
Metóda, na ktorú odkazujeme, je tiež transformovať-funkcie, ktorý by mohol byť nahradený jedným z týchto spôsobov: translate (), meradlo (), točiť sa() alebo skosenie ().
Hodnota
Väčšina hodnoty metódy bude zodpovedať hodnotám os X a os Y. Ak si pamätáte systém kartézskych súradníc z vašej mathovej triedy na strednej škole, základný princíp je dosť podobný, os X predstavuje horizontálne line a os Y predstavuje vertikálne riadok.
Okrem rotácií. otáčania bude používať polárnych súradníc ktorá je vyjadrená v stupňoch od 0 do 360.
Hodnoty pre všetky metódy môžu byť negatívne alebo pozitívne. Stačí si však všimnúť, že webová stránka sa číta postupne zhora nadol, čo spôsobuje, že osa Y v sieti funguje oproti pôvodnému princípu karteziánskych súradníc. To znamená, že keď pridáte zápornú hodnotu os Y, presunie sa na miesto.
Použitie transformácií
Teraz uvidíme nasledovnú základnú ukážku, aby sme videli Transformáciu v akcii.
Prekladám
Nebuďte zahalený termínom preložiť, nebude prekladať cudzí jazyk. preložiť tu je vlastne metóda pre pohyb prvkov v určitom smere.
Metóda obsahuje dve hodnoty; X a Y. Hodnota X ako sme uviedli vyššie, prvok bude braný horizontálne; vľavo alebo vpravo, kým Y hodnota bude mať vertikálne v spodnej alebo hornej časti.
Teraz uvidíme niekoľko jednoduchých ukážok nižšie:
div šírka: 100px; výška: 100px; transformovať: prekladať (100px, 250px);
Súčasný úryvok presunie prvok o 100 pixlov napravo a 250 pixelov dole.
div šírka: 100px; výška: 100px; transformovať: prekladať (100px, 0);
Fragment hore presunie prvok doprava o 100 pixlov, pretože vynulujeme os Y. Potom, ak chceme prvok posunúť doľava, stačí nastaviť zápornú os X:
div šírka: 100px; výška: 100px; transformovať: prekladať (-100px, 0);
- Preložiť demo
Alternatívne sme schopní presunúť element v jednom smere pomocou týchto individuálnych metód; translateX () a translateY (), rozdiel je, že každá z týchto metód akceptuje iba jednu hodnotu.
Takže prakticky povedané transformovať: preložiť (-100px, 0) sa tiež rovná transformovať: translateX (-100px).
II - mierka
mierka metóda nám umožňuje zväčšiť alebo znížiť prvky z jeho skutočnej veľkosti. Hodnota stupnice je rovnaká ako hodnota preložiť vyššie, obsahuje aj X a Y. Jediný rozdiel je, že jednotku neurčujeme. Tu je príklad:
div šírka: 100px; výška: 100px; transformácia: stupnica (1,5);
Vyššie uvedený príklad zväčší div 1,5 alebo 150% jeho skutočnej veľkosti, a keďže sme ju rovnomerne rozlíšili pre smer X aj Y, musíme ju deklarovať len v jednej hodnote. Môžete to takisto deklarovať transformácia: stupnica (1,5, 1,5); ak chcete získať viac podrobností, urobí to isté.
Okrem toho, ak chceme znížiť prvok, konkrétne použijeme hodnotu od 0.999 do absolútne 0, ako je to v príklade nižšie, čo zníži veľkosť diviny o 50% alebo polovicu:
div šírka: 100px; výška: 100px; transformácia: mierka (0,5);
Ale buďte opatrní, ak nastavíte absolútnu hodnotu “0” div bude jednoducho zmiznúť, takže ak by ste nemali platný dôvod, neurobili by ste to.
- Demo "Scale"
III - Otočte
Ako sme už uviedli v tomto príspevku, točiť sa metóda používa polárne súradnice, takže hodnota je uvedená v stupňoch. Tu sú dva príklady
Fragment nižšie bude otáčať div 30 ° v smere hodinových ručičiek.
div šírka: 100px; výška: 100px; transformácia: otočenie (30deg);
Záporná hodnota, ako je ilustrovaná v nižšie uvedenom príklade, bude rotovať div v opačnom smere (proti smeru hodinových ručičiek) v rovnakom stupni.
div šírka: 100px; výška: 100px; transformácia: rotácia (-30deg);
- Ukážka "Otočiť"
IV - Skosenie
prekrútiť metóda nám umožňuje vytvoriť akýsi paralelogram. Obsahuje tiež dve hodnoty osí X a Y. Samotná hodnota je však uvedená v stupni, namiesto lineárnych meraní, aké používame pre mierka alebo preložiť metóda. Tu je príklad:
div šírka: 200px; výška: 100px; transformácia: skosenie (30deg, 10deg);
- Demo "Skic"
V - Viacnásobná metóda
premeniť vlastnosť nie je obmedzená na spracovanie iba jednej metódy, v skutočnosti môžeme zahrnúť viaceré metódy v jednotlivých deklaráciách, napríklad:
div šírka: 100px; výška: 100px; transformovať: translateX (100px) rotovať (45deg);
Uvedený úryvok presunie prvok 100px doprava a súčasne sa tiež otáča o 45 stupňov.
Demo "Viacnásobná metóda".
Transformovať pôvod
transfrom-origin - ako to naznačuje jeho názov - slúži na riadenie východiskového bodu transformácie. Ak túto vlastnosť explicitne nevyhlasujeme s nasledujúcou syntaxou transformácia-pôvod: X Y;, potom prehliadač bude mať predvolenú hodnotu, ktorá je 50% pre X a 50% pre Y..
Teraz, ak špecifikujeme transformácie-origin na 0 (X) 0 (Y) transformácia začne v ľavom hornom rohu.
Všetky prehliadače ešte stále potrebujú prefixovú verziu, aby zavolali túto vlastnosť. Takže tu je kompletná verzia, ktorá zabezpečuje, že funguje vo väčšine bežných prehliadačov:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transformovať-pôvod: X Y; -ms-transform-origin: X Y; transformácia-pôvod: X Y;
- Demonštrácia "Transform-origin"
záver
Prešli sme všetkými štyrmi základnými metódami transformácie; prekladať, škárovať, otáčať a skákať
Ako som uviedol, tento modul je stále v počiatočnom štádiu, takže ak použijete tieto metódy na ďalšej webovej stránke, uistite sa, že to ladne degraduje pre nekompatibilné prehliadače (nehovorím o IE6 tu).
Nakoniec môžete zobraziť všetky demo alebo prevziať zdroj z nasledujúcich odkazov.
- demonštrácie
- Stiahnuť zdroj
