Mgr. Vlastislav Kučera přednáška č. 5
transformace přechody
umožňuje posunout, natočit, zkosit, změnit měřítko libovolného prvku vlastnost transform podpora: ◦ Firefox 16+, Chrome 10+, IE 9+, Opera ◦ IE9: -ms-transform ◦ Chrome: -webkit-transform
hodnota translate(x,y) vlastnosti transform ◦ posun o x zleva a y shora ◦ i záporné hodnoty translatex vlastnosti transform ◦ svislý posun translatey vlastnosti transform ◦ vodorovný posun nemá dopad na tok dokumentu – okolní prvky se nepřizpůsobují změnám
hodnota scale(x,y) vlastnosti transform ◦ změna velikosti ve vodorovném i svislém směru ◦ pokud jedna hodnota: použije se pro oba směry scalex vlastnosti transform ◦ změna pouze ve vodorovném směru scaley vlastnosti transform ◦ změna pouze ve svislém směru nemá dopad na tok dokumentu – okolní prvky se nepřizpůsobují změnám
hodnota rotate() vlastnosti transform ◦ otočí prvek kolem počátku (střed prvku) o daný úhel ◦ úhel rotace se zadává ve stupních (jednotka deg) ◦ můžeme zadat kladné i záporné hodnoty ◦ kladná hodnota: rotace ve směru hodinových ručiček ◦ záporná hodnota: rotace proti směru hodinových ručiček
hodnota skew(x, y) vlastnosti transform ◦ sešikmení podle osy x a y o zadané stupně ◦ pokud jenom jedna hodnota: zešikmení jenom na ose x skewx(hodnota) ◦ hodnota: stupně skewy(hodnota) ◦ hodnota: stupně
můžeme definovat více hodnot jednotlivé hodnoty oddělujeme mezerou
vlastnost pro změnu počátku transformace stejná syntaxe jako u background-position podpora: ◦ Firefox 16+, Chrome 10+, IE9+, Opera ◦ IE9: -ms-transform-origin ◦ Chrome: -webkit-transform-origin
můžeme definovat, aby se přechody měnily v čase – vytvářet jednoduché animace Animace v CSS3 ◦ definujeme počáteční a koncový stav prvku ◦ definujeme vlastnosti, které vstupují do animace ◦ dobu animace, prodlevu, než animace začne, efekt animace (rychlejší začátek, pomalejší konec, …) podpora: ◦ Firefox 16+, Chrome 26+, IE10+, Opera 12.1+
vlastnost prvku, která spolupracuje na přechodovém efektu ◦ background-color, background-position ◦ border-color, border-width, border-spacing ◦ bottom, top, left, right ◦ color, font-size, font-weight, letter-spacing, line- height, text-indent ◦ height, width ◦ margin, padding ◦ transform při použití více vlastností se oddělují čárkou
určuje dobu přechodového efektu hodnota: sekundy(s), milisekundy(ms) ◦ 200ms = 0.2s
změna rychlosti animace hodnoty ◦ ease, linear, ease-in, ease-out
nastavení prodlevy, než animace začne hodnota: v sekundách výchozí hodnota: 0 – přechod začne ihned
můžeme definovat jednotlivé dílčí vlastnosti nebo zkrácený zápis: ◦ transition: color 5s ease 1s; totožný s: ◦ transition-property: color; ◦ transition-duration: 5s; ◦ transition-timing-function: ease; ◦ transition-delay: 1s;