Transformace

CSS transformace umožňují prvků na stránce měnit jejich velikost, rotaci, posunutí a zkreslení. Transformace se provádí pomocí CSS vlastnosti transform. Transformace se provádí vzhledem k původní velikosti prvku a neovlivňují pozice ostatní prvků na stránce.

Změna velikosti prvku

Základní

Následující kód zařídí, aby se prvek se třídou prvek jevil dvakrát větší, než je jeho původní velikost.

.prvek {
	transform: scale(2);
}

Pouze v jedné ose

Další kód naopak způsobí, že prvek bude třikrát větší ve směru osy x. Tedy velmi široký.

.prvek {
	transform: scaleX(3);
}

A pro ovlivnění pouze velikosti na ose y použijeme scaleY. Následující kód zmenší prvek na polovinu výšky a převrátí vzhůru nohama.

.prvek {
	transform: scaleY(-0.5);
}

Příklad užití

• Zvětšení obrázku při najetí myši.

Rotace prvku

Rotace prvku se provádí pomocí funkce rotate. Následující kód otočí prvek o 45 stupňů.

.prvek {
	transform: rotate(45deg);
}

Příklad užití

• Ikonka křížku pouze v HTML a CSS (bez obrázku).

Posunutí prvku

Posunutí prvku se provádí pomocí funkce translate. Následující kód posune prvek o 50px na ose x (tedy doprava) a o 100px na ose y (tedy dolů).

.prvek {
	transform: translate(50px, 100px);
}

Procentuální hodnoty

Na rozdíl od position: relative, kde například left: 50% znamená posunutí prvku od levé strany (tedy doprava) o 50% šířky rodiče, u transform znamená translateX(50%) posunutí prvku o 50% jeho vlastní šířky.

Příklad užití

• Podobně jako position: relative.

Počátek

S vlastností transform se pojí i vlastnost transform-origin, která určuje bod, kolem kterého se transformace provádí. Výchozí hodnota je 50% 50%, tedy střed prvku. Origin/počátek si můžeme třeba v případě rotace představit jako pomyslný špendlík, který do prvku píchneme a kolem kterého se prvek pak otáčí. První hodnota odpovídá pozici špendlíku na ose x, druhá na ose y.

Výchozí hodnota

.prvek {
	transform-origin: 50% 50%;
}

Uprostřed nahoře

.prvek {
	transform-origin: 50% 0;
}

Příklad užití

• Ikonka šipky pouze v HTML a CSS (bez obrázku).

Pro pokročilé

Zkosení

MDN skew

Matice

Matematický zápis všech vlastností výše dohromady.

MDN matrix

3D

• Rotace pexeso karet
• Ukázka kostky

Skládání

Na prvek je možné aplikovat více transformací naráz pomocí řetězení.

.prvek {
	transform: scale(2) rotate(45deg) translate(50px, 100px);
}

Moderní, zkrácený zápis

Prohlížeče relativně nově umí transformace bez vlastnosti transform.

.prvek {
	scale: 2;
	rotate: 45deg;
	translate: 50px 100px;
}

Cvičení

Postupuj podle zadání na github.com/…/Cviceni-Transformace.

Vycházej z předpřipraveného kódu v repozitáři. Máš v něm nachystaný už index.html, styly a obrázky.