Podívejte se do CSS3 2D transformací
Transformační modul je obrovský doplněk v CSS3, to trvá způsob, jakým manipulujeme s prvky na webu na další úroveň.
Tam jsou některé experimenty, které mě opravdu ohromí, příklady, jako je tento. Nebudeme však stavět něco jako jen CSS-ikonu, která se může nějakým způsobem transformovat na Autobot, protože to může být ohromující a ne zcela použitelný v reálném životě..
Tentokrát budeme tentokrát krokem zpět a přezkoumávat základy CSS3 2D transformací, abychom zjistili, jak funguje na základní úrovni.
Syntaxe
Modul CSS3 Transformations nám v zásadě umožňuje transformovat prvek do určité míry, jako je překlad, změna velikosti, otáčení a šikmý pohyb.
Oficiální syntaxe je transform: metoda (hodnota). Současné prohlížeče však stejně jako ostatní skvělé doplňky CSS3, které jsou stále v raných fázích, stále potřebují k provedení transformací verzi syntaxe. Úplná syntaxe by tedy vypadala takto:
transform: metoda (hodnota); / * Oficiální syntaxe W3C * / -o-transform: metoda (hodnota); / * Opera 10.5+ * / -ms-transform: metoda (hodnota); / * Internet Explorer 9.0+ * / -moz-transform: metoda (hodnota); / * Firefox 3.6+ * / -webkit-transform: metoda (hodnota); / * Chrome / Safari 3.2+ * /
Metoda, na kterou odkazujeme, je také transformační funkce, které by mohly být nahrazeny jedním z následujících: přeložit(), stupnice(), točit se() nebo zkreslit().
Hodnota
Většina hodnoty metody bude odpovídat hodnotě Osa X a Osa Y. Pokud si pamatujete kartézský souřadný systém z vaší třídy matematiky ve střední škole, základní princip je docela podobný, osa X představuje horizontální a osa Y představuje vertikální řádek.
Kromě rotací. otáčení bude používat polární souřadnice která je vyjádřena ve stupních od 0 do 360 °.
Hodnoty pro všechny metody mohou být negativní nebo pozitivní. Prostě si vezměte poznámku, protože webová stránka je čtena postupně od shora dolů, což činí osu Y ve webové práci opak oproti původnímu principu karteziánských souřadnic. To znamená, že když přidáte zápornou hodnotu Osa Y, místo toho se přesune na vrchol.
Použití transformací
Podívejme se nyní na následující základní demonstraci a uvidíme Transformaci v akci.
Překládám
Nenechte se zahalit termínem přeložit, nebude překládat cizí jazyk. přeložit zde je vlastně metoda pro pohybující se prvky v určitém směru.
Metoda obsahuje dvě hodnoty; X a Y. Hodnota X jak jsme uvedli výše, vezme prvek vodorovně; vlevo nebo vpravo, zatímco Y hodnota bude mít svisle k nahoře nebo nahoře.
Podívejme se nyní na několik jednoduchých ukázek:
div width: 100px; výška: 100px; transformace: překlad (100px, 250px);
Výše uvedený úryvek přesune prvek pro 100px doprava a 250px dolů.
div width: 100px; výška: 100px; transformace: přeložit (100px, 0);
Výseč nahoře přesune prvek napravo pro 100px, protože nulováme osu Y. Pokud chceme prvek přesunout doleva, stačí nastavit osu X negativně takto:
div width: 100px; výška: 100px; transformace: přeložit (-100px, 0);
- Demo "Přeložit"
Alternativně jsme schopni tyto elementy pohybovat v jediném směru; translateX () a přeložitY (), rozdíl je, že každá z těchto metod akceptuje pouze jednu hodnotu.
Takže prakticky řečeno transformace: přeložit (-100px, 0) je také rovno transformace: translateX (-100px).
II - Měřítko
stupnice metoda nám umožňuje zvětšit nebo zmenšit z jeho skutečné velikosti. Hodnota měřítka je stejná jako hodnota přeložit výše uvedená metoda obsahuje také X a Y. Jediný rozdíl je, že jednotku nezadáme. Zde je příklad:
div width: 100px; výška: 100px; transformace: měřítko (1,5);
Výše uvedený příklad zvětší div 1,5 nebo 150% jeho skutečné velikosti, a protože jsme jej změnili stejně pro obě směry X a Y, musíme jej deklarovat pouze v jedné hodnotě. Můžete to také deklarovat tímto způsobem transformace: měřítko (1,5,1,5); pokud chcete jít více podrobností, bude to prostě dělat totéž.
Pokud chceme prvek redukovat, použijeme specificky hodnotu od 0,999 do absolutní hodnoty 0, jako je příklad uvedený níže, který sníží velikost div o 50% nebo o polovinu:
div width: 100px; výška: 100px; transformace: měřítko (0,5);
Ale buďte opatrní, pokud nastavíte hodnotu na absolutní “0” div prostě zmizí, takže pokud na to nemáte platný důvod, nedoporučoval bych to.
- Demo "Měřítko"
III - Otočení
Jak jsme zmínili dříve v tomto příspěvku, točit se metoda používá polární souřadnice, takže hodnota je uvedena ve stupních. Zde jsou dva příklady
Úryvek pod ním otočí div 30 stupňů ve směru hodinových ručiček.
div width: 100px; výška: 100px; transformace: rotace (30deg);
Záporná hodnota, jak je znázorněno v příkladu níže, bude otáčet div v opačném směru (proti směru hodinových ručiček) ve stejném stupni.
div width: 100px; výška: 100px; transformace: rotace (-30deg);
- "Otočit" demo
IV - Zkosení
zkreslit metoda nám umožňuje vytvořit jakýsi paralelogram. Obsahuje také dvě hodnoty osy X a Y. Samotná hodnota je však uváděna ve stupních namísto lineárních měření, která používáme pro stupnice nebo přeložit metoda. Zde je příklad:
div width: 200px; výška: 100px; transformace: skew (30deg, 10deg);
- "Skew" demo
V - násobná metoda
přeměnit vlastnost není omezena na zpracování pouze jedné metody, ve skutečnosti můžeme zahrnout více metod do jednotlivých deklarací, jako je tato:
div width: 100px; výška: 100px; transformace: translateX (100px) rotuje (45deg);
Výše uvedený úryvek přesune prvek 100px doprava a zároveň se otočí o 45 stupňů.
Demo "Multiple Method".
Původ transformace
původu - jak jeho název napovídá - slouží k řízení výchozího bodu transformace. Pokud tuto vlastnost explicitně neoznámíme s následující syntaxí transformační původ: X Y;, pak prohlížeč vezme výchozí hodnotu, která je 50% pro X a 50% pro Y.
Nyní, pokud specifikujeme transformačního původu na 0 (X) 0 (Y) transformace začne v levém horním rohu.
Opět platí, že všechny prohlížeče stále potřebují předvolenou verzi pro volání této vlastnosti. Zde je kompletní verze, která zajistí, že bude fungovat ve většině současných prohlížečů:
-webkit-transform-origin: X Y; -moz-transformace: X Y; -o-transformace: X Y; -ms-transform-origin: X Y; transformační původ: X Y;
- Demo "Transformace původu"
Závěr
Prošli jsme všemi čtyřmi základními transformačními metodami; překládat, měřítko, otáčet a šikmo
Nicméně, jak bylo zmíněno, tento modul je stále v rané fázi, takže pokud tyto metody použijete na svých dalších webových stránkách, ujistěte se, že degraduje ladně pro nekompatibilní prohlížeče (nemám na mysli IE6 zde).
Nakonec si můžete prohlédnout všechny ukázky nebo stáhnout zdroj z následujících odkazů.
- Demo
- Stáhněte si zdroj
