Transformovat CSS: Teorie a příklady transformujících objektů

Třetí verze kaskádových stylových listů představila nové vlastnosti pro objekty webových stránek. To je schopnost vytvářet bloky s vyhlazenými rohy, upravovat stíny, přidat průhlednost a gradient, nastavit animaci. Ten druhý stojí za zmínku podrobněji. Pokud dříve, abychom vytvořili iluzi pohybu, byly do stránek, které musely být speciálně kresleny, přidány soubory gif, pak transformační atribut CSS provede všechny akce pro animaci objektů automaticky. Zůstává naučit se ho používat.

Vlastnosti nemovitosti

Objekty se obvykle používají při transformaci myši. Je nastavena na pseudo-třídu s názvem : hover . Změny ovlivňují pouze jeden prvek webové stránky, aniž by to ovlivnilo ostatní.

Zvažovaný parametr stylů je často zaměňován s jiným - text-transform . CSS jasně rozlišuje tyto atributy. Ten definuje 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.

Můžete přidat k libovolnému objektu:

• pohybující se podél přímky (vodorovná, svislá, úhlopříčná);
• otočení (speciální případ - náklon);
• škálování;
• kombinace uvedených účinků.

Kromě iluze pohybu tří typů umožňuje vlastnost nastavit odraz, posun a perspektivu. Pro pokročilé je parametr uveden ve formě matice.

Transformace se provádí vzhledem ke středu prvku. V případě potřeby se referenční bod posune. Parametr transformace: a b c posune střed objektu vzhledem k trojrozměrnému souřadnému systému xyz .

Horizontální pohyb

Nejjednodušší typ pohybu je vodorovně, tj. Vlevo-vpravo nebo podél osy x . Chcete-li jej nastavit, použijte hodnotu překladu vlastností ( x, y) .

Protože se prvek musí pohybovat pouze v jednom směru, souřadnice y je nastavena na y = 0. Souřadnici x by však měla být přiřazena určitá hodnota v pixelech, kterou by měl být objekt posunut. Negativní hodnota - pohyb vlevo, kladný - vpravo.

Jednoduché zadání transformace CSS však nevytvoří iluzi pohybu. Řešením je přidat atribut přechodu do popisu objektu. Pracovní příklad pro přemístění prvku 125 pixelů doprava je znázorněn níže.

Přechodový kód linky : vše 2 s easy- out - out znamená:

• all - nastavená hodnota se aplikuje na všechny parametry objektu;
• 2 s - trvání efektu 2 sekundy;
• zpomalení na začátku a na konci.

Pohybujte 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 posunu. Pohybem nahoru je záporná hodnota, dolů je kladná hodnota.

Vlastnost transformace CSS pro třídu v níže uvedeném příkladu ukazuje hladký pohyb objektu z bodu se souřadnicemi (0, 0) 80 pixelů nahoru. Třída dolů určuje opačný směr pohybu - 80 pixelů dolů.

Animace v příkladu se provádí konstantní rychlostí, jak je naznačena hodnotou lineární .

Diagonální pohyb

Pokud kombinujete zvažované pohyby definované transformací, příklady CSS pro diagonální pohyb se získají jednoduše.

Atribut nastavuje hodnoty pro obě souřadnice. Vzdálenost posunu je udávána v pixelech. Tam, kde se objekt bude pohybovat, závisí na značkách. K dispozici jsou čtyři možnosti:

• x , y positive - posun doprava dole;
• x , y negativní - pohyb vlevo;
• x - pozitivní, y - negativní - pohyb nahoru směrem doprava;
• x - negativní, y - pozitivní - posun vlevo.

Příklad vám pomůže s transformací funkcí CSS.

Pokud je posun po obou osách proveden stejným počtem pixelů (například 32), stačí zadat jedno číslo. To znamená, že překlad (32) odpovídá překladu (32, 32).

Rotace

Po zvážení možných způsobů posunu pokračujeme k dalšímu typu transformace - otáčení. Rotace nastavuje hodnotu r otate (Xdeg) , kde X je stupně (od 0 do 360), čímž 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 - proti. V případě potřeby můžete kombinovat oba typy otáčení - viz níže uvedený příklad.

Změna velikosti

Následující hodnota přidává měřítko prvků: měřítko ( a , b ) . Písmena v závorce jsou šířka a výška objektu. Pokud chcete velikost zvýšit proporcionálně třikrát, stačí psát měřítko (3) . Snižte rozměry čísla menší než jeden.

Atribut CSS atributu transformovat atribut lze aplikovat pouze na horizontální měřítko X nebo pouze na vertikální měřítko Y. Zajímavé efekty odrazu a stínu se získají, pokud jsou pro měřítko Y uvedeny záporné hodnoty .

Transformace textu

Začátečníci zaměňují vlastnost transformace textovým atributem CSS. Nezapomeňte, že tento parametr platí pouze pro text. Používá se k řízení případu psaní odstavce znaků. Například po instalaci malých písmen je text převeden na malá písmena, velká písmena - velká písmena (například stisknutí klávesy CapsLock na klávesnici). Chcete-li, aby slova začala velkým písmenem, je vlastnost přiřazena kapitalizovat .

Na rozdíl od transformace objektu transformace textu podporuje dědičný mechanismus. Převod znaků je přiřazen třídám, která jsou zodpovědná za zobrazování záhlaví, což je v praxi výhodné, protože není zapotřebí sledovat záznamovou metodu. Pod libovolnou pravopisnou variantou se všechny bloky textu objeví na webu stejným způsobem.