CSS Tutoriál XII. – Přeměny prvků

Tentokrát se podíváme na to, jak můžeme změnit nějaký prvek, případně jak můžeme vytvořit nějaký přechod, přeměnu. Vlastně takovou animaci. Při těchto vlastnostech opět potřebujeme předponu -webkit-

Pomocí vlastnosti transition nastavujeme jaké vlastnosti se změní a kdy. Toto je užitečné, pokud chceme aby se nám změnil prvek pouze specificky při nějaké akci. Tady využijeme hodně pseudo-selektory jako :hover, :visited, :empty a další. První hodnotou (transition-property) je tedy jméno vlastnosti, která se změní. Můžeme buďto vybrat všechny – all, a nebo specificky vypsat které se mají změnit. Např. tedy napíšeme <div style=“ transition: width; width:200px;“> -> v této sekci se změní jenom šířka. Druhou hodnotou (transition-duration) je délka trvání změny – než se změna dokončí. Zadáváme jí v sekundách nebo milisekundách. Třetí hodnotou (transition-timing-function) je opět jakým způsobem se mění rychlost přechodu. Má stejné hodnoty jako u animace, tedy ease, ease-in, ease-in-out, ease-out a linear. Poslední hodnotou je transition-delay, které určuje zpoždění přechodu. Náš přechod tedy může být například při přejetí myši. pokud tedy přidáme do CSS stylu div:hover {300px;} změní se velikost o 100px.

Abychom ale mohli něco změnit, potřebujeme k tomu také umět vlastnost transform, která nám právě pomáhá s tím, co konkrétně změnit. Díky ní můžeme měnit velikost, tvar a pozici. Celkově můžeme transform rozdělit na 2D přeměny a 3D přeměny.

Do 2D přeměn patří translate, rotate, skew, scale a matrix. Metoda translate nám říká o kolik se prvek posune v prostoru. Jejími hodnotami jsou tak 2 délkové jednotky – první pro posunutí po ose x a druhé po ose y (směrem doprava a dolů). Pro ty méně znalé geometrie to je první pro posun horizontálně a druhá pro posun vertikálně. Zapisujeme například takto: transform: translate (10px,20px); Můžeme použít i záporné hodnoty – pro posun směrem doleva.

Metodou rotate nastavujeme rotaci prvku pomocí stupňů. Rotace je po směru hodinových ručiček. Pokud tedy zapíšeme transform: rotate (20deg) znamená to, že se prvek natočí o 20 stupňů doprava. Pokud bychom chtěli posunout prvek proti směru hodinových ručiček, zapisujeme stupně záporně.

Metodou scale nastavujeme zvětšení nebo zmenšení prvku. První hodnota se týká šířky a druhá výšky. Pokud nastavíme transform: scale (3,6) znamená to, že šířka bude 3x větší a výška 6x větší. Záporné hodnoty znamenají zmenšení.

Pomocí skew nastavujeme zkosení prvku. Opět zapisujeme v úhlech. První úhel se týká zkosení do šířky a druhý zkosení do výšky. Například transform: skew (40deg, 20deg)

Hodnota matrix nám umožňuje měnit všechny tyto vlastnosti najednou. Požaduje 6 číselných hodnot. Je podle mě pro běžné uživatele až příliš složitá. Pokud ale máte chuť či schopnosti, odvíjí se od matematické funkce. Hodně štěstí.

U některých z těchto vlastností můžeme při přeměně použít pouze posun/zkosení po ose X nebo pouze po ose Y. V těchto případech používáme např translateX, translateY, skewX, skewY a podobně.

Do 3D přeměn řadíme všechny z těchto prvků, ale v jejich zobrazování bude rozdíl. Budou mít totiž v popisu navíc osu Z. Zatímco 2D rotate se otočí jenom dokola, 3D rotate se otočí jakoby do třetí dimenze, okolo osy Z. Všechny 3D přeměny (s hodnotami) jsou:

translate 3d (x,y,z)translateX (x)translateY (y)translateZ(z)scale3d (x,y,z)scaleX(x)scaleY(y)scaleZ(z)rotate3d(x,y,z,úhel)rotateX(úhel)rotateY(úhel)rotateZ(úhel)

Pro transform můžeme ještě určit transform-origin, který nám nastavuje, kde se začíná s přeměnou. Můžeme zadat v procentech, pixelech, jak je libo. Měníme jí pro osu x, osu y a osu z. Zde se to nedá příliš popsat, snad se radši podívejte na demo:

Transform-style nám zase určuje, jestli při přeměně jsou i prvky vně elementu zobrazeny jako 3D nebo jako 2D. Při hodnotě preserve-3d se zobrazí jako 3D prvky a při hodnotě flat se budou chovat jako 2D. Demo ZDE

Možnost perspective nám určuje jak vidíme prvek. Její hodnotou je počet pixelů, jak moc je prvek vzdálen. Určuje nám naklonění a ovlivňuje pouze 3D transformované elementy. Demo ZDE

Pomocí perspective-origin můžeme pohybovat i spodním okrajem 3D prvků. První číslo mluví o pohybu po ose x a druhé o pohybu po ose y. Demo ZDE

A konečně poslední – backface-visibility nám určuje, jestli má prvek mít viditelnou zadní stranu – když je od nás odvrácen. Jeho možnými hodnotami jsou hidden – pokud je odvrácen, nevidíme ho a nebo visible – vidíme zadní stranu.