Pohyb

Transformace

Otočit, posunout, zvětšit. Transformace mění, jak prvek vypadá, a přitom nehne se zbytkem stránky.

Rozházíme fotky z tábora po nástěnce. V náhledu vidíte, kam se dostaneme.

Začátek

Fotky v řadě

Tři fotky s bílým okrajem na nástěnce, srovnané vedle sebe jako na pravítku. Působí strojově.

Fotky řadí flexbox. Transformace mu do toho nezasahují, jen každou fotku vykreslí trochu jinak.

Funkce · 1

Otočení `rotate()`

První fotku pootočíme doleva, třetí doprava. Úhel se píše ve stupních, deg. Záporné číslo točí proti směru hodinových ručiček.

Otáčí se kolem středu prvku. Jiný střed otáčení nastaví transform-origin, třeba top left.

Funkce · 2

Posun `translate()`

Prostřední fotku posuneme o 20 px dolů. Ostatní fotky ani nástěnka se nepohnou: pro layout stránky je fotka pořád na svém původním místě.

translateX() posouvá vodorovně, translateY() svisle, translate(x, y) oběma směry. Rozdíl proti margin: transformace nic kolem sebe neodstrčí.

Funkce · 3

Zvětšení `scale()`

Prostřední fotka je nejlepší, trochu ji zvětšíme. Víc funkcí se píše za sebe do jedné vlastnosti transform, oddělené mezerou.

Kdybyste napsali dvě vlastnosti transform pod sebe, platila by jen ta druhá. scale(1.1) = 110 %, scale(0.5) = poloviční velikost.

Responzivita

Na telefonu pod sebou

Na úzké obrazovce dáme fotky pod sebe. Jenže posun a zvětšení prostřední fotky nic neodstrčí, takže by přelezla přes sousední. Na mobilu ji proto jen pootočíme.

To, že transformace neovlivní okolí, je výhoda (nic neposkočí) i past (prvky se můžou překrýt).

Shrnutí

Vzhled se mění, místo zůstává

Ano

rotate(), translate() a scale() v jedné vlastnosti transform
malé úhly a malá zvětšení
počítat s tím, že transformace okolí neodstrčí

Ne

dvě vlastnosti transform na jednom prvku
translate místo flexboxu a gridu na layout

Novější zápis má každá funkce jako samostatnou vlastnost: rotate: 3deg, scale: 1.1, translate: 0 20px. Pak se nepřepisují.

Další lekce: Transitions →