Třetí verze kaskádových stylů přinesla objekty webových stránek nové vlastnosti. Je to příležitost vytvořit bloky s vyhlazenými rohy, upravit stíny, přidat průhlednost a gradient, nastavit animaci. Stojí za to zmínit více o tom. Pokud dříve, k vytvoření iluze pohybu na stránkách přidány soubory gif, které byly nutné k přizpůsobení, pak nyní atribut transform CSS provádí všechny akce pro animaci objektů automaticky. Zůstává naučit se ho používat.
Zvláštnosti aplikace vlastností
Obvykle přeměna objektů uchvácených na myš, která se na nich pohybuje. Je určen pro pseudo-třídu s názvem: hover. Změny ovlivňují pouze jeden prvek webové stránky bez ovlivnění ostatních. Diskutovaný styl stylu je často zaměňován s jiným - text-transform. CSS jasně vymezuje tyto atributy. Ten určuje styl psaní textu a vztahuje se pouze na odstavce webové stránky, zatímco transformace ve své čisté podobě se používá pro všechny prvky.
K libovolnému objektu můžete přidat:
pohybující se podél přímky (vodorovná, svislá, úhlopříčná);
otočení (zvláštní případ - sklon);
škálování;
kombinace těchto efektů.
Kromě iluze pohybu tří typů umožňuje vlastnost určit reflexi, zkreslení a perspektivu. Pro rozšířený parametr je uveden ve formě matice. Transformace se provádí vzhledem ke středu prvku. Je-li to nutné, referenční bodposunuté Parametr transformace: a b c posune střed objektu vzhledem k trojrozměrnému souřadnicovému systému xyz.
Horizontální pohyb
Nejjednodušší forma pohybu horizontálně, tj. Vlevo a vpravo podél osy x. Pro jeho úkol je použita hodnota vlastnosti translate (x, y). Protože se prvek musí pohybovat pouze v jednom směru, souřadnice y je nastavena na 0. Souřadnici x však musí být přiřazena určitá hodnota v pixelech, na kterou musí být objekt posunut. Negativní hodnota - pohyb vlevo, kladný - vpravo. Ale jednoduchá indikace transformace CSS nevytvoří iluzi pohybu. Řešením je přidat atribut přechodu na popis objektu. Příklad práce pro pohyb prvku vpravo od 125 pixelů je uveden níže.
Řádek přechodového kódu: všechno 2 snadné - in - out znamená:
všechny - nastavená hodnota platí pro všechny parametry objektu;
2 s - Doba trvání efektu je 2 sekundy;
easy - out - out - pomalý pohyb na začátku a konci.
Posun nahoru /dolů
Hodnota překladu (x, y) se používá pro vertikální nastavení animace. V tomto případě je souřadnice x rovna nule a y je přiřazena velikost posunutí. Posun nahoru - negativní, dolů - pozitivní. Vlastnost transformace CSS pro třídu nahoru v níže uvedeném příkladu demonstruje hladký pohyb objektu od souřadného bodu (0; 0) o 80 pixelů nahoru. Dolní třída specifikuje opačný směr pohybu - o 80 pixelů dolů. Animace v příkladu se provádí konstantní rychlostí, jak je naznačena lineární hodnotou.
Diagonální kurz
Kombinace transformací považovaných za transformaci jsou příklady CSS pro diagonální pohyb jednoduché. V atributu jsou hodnoty nastaveny pro obě souřadnice. Odstup vzdálenosti je dán pixely. Kde se objekt bude pohybovat - záleží na postavách. Existují čtyři možnosti:
x, y pozitivní - doprava dolů;
x, y negativní - pohyb vzhůru nohama;
x - pozitivní, y - negativní - pohyb nahoru;
x - negativní, y - pozitivní - pohyb vlevo.
Za účelem překonání vlastností transformace pomůže CSS příklad.
Pokud je zkreslení provedeno na stejném počtu pixelů (např. 32), stačí uvést jedno číslo. To znamená, překladový překladodpovídá překladu (3232).
Otáčení
Po zvažovaných možných způsobech pohybu se postupuje k dalšímu typu transformace - otáčení. Otáčení nastavuje hodnotu r otate (Xdeg), kde X - stupně (od 0 do 360), na které se objekt odchyluje od původní polohy. Zbývá pochopit směr otáčení. Typ rotace je určen znaky: plus - ve směru hodinových ručiček, mínus - vs. V případě potřeby můžete kombinovat oba typy otáčení - viz níže uvedený příklad.
Změna velikosti
Tato hodnota přidává měřítko prvků: měřítko (a, b). Písmena v závorkách jsou šířka a výška objektu. Pokud chcete velikost zvýšit poměrně třikrát, stačí napsat stupnici . Snižte rozměry čísla menší než jeden.
Atribut Cransformace CSS lze použít pouze pro měřítko X nebo pouze provertikální měřítko Y Objeví-li se negativní hodnoty pro měřítko Y, objeví se zajímavé efekty odrazu a stínu.
Transformace textu
Nově příchozí zaměňují přeměněnou vlastnost s atributem CSS text transformovat. Připomínáme, že tato volba platí pouze pro text. Ovládá znak znakového odstavce. Například po nastavení malých písmen je text převeden na malá písmena, velká písmena - velká písmena (podobně jako klávesa CapsLock na klávesnici). Slova, která začínají kapitalizací, jsou přiřazena vlastnostem. Na rozdíl od transformace objektů, transformace textu podporuje mechanismus dědičnosti. Transformace symbolů jsou přiřazeny třídám odpovědným za výstup hlaviček, což je v praxi praktické, protože není zapotřebí sledovat způsob záznamu. S jakýmkoli pravopisem se všechny textové bloky zobrazí stejným způsobem na webu.