Mgr. Vlastislav Kučera přednáška č. 5.  transformace  přechody.

Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 5.  transformace  přechody."— Transkript prezentace:

1 Mgr. Vlastislav Kučera přednáška č. 5

2  transformace  přechody

3  umožňuje posunout, natočit, zkosit, změnit měřítko libovolného prvku  vlastnost transform  podpora: ◦ Firefox 16+, Chrome 10+, IE 9+, Opera 12.1+ ◦ IE9: -ms-transform ◦ Chrome: -webkit-transform

4  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

5  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

6  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

7  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ě

8  můžeme definovat více hodnot  jednotlivé hodnoty oddělujeme mezerou

9  vlastnost pro změnu počátku transformace  stejná syntaxe jako u background-position  podpora: ◦ Firefox 16+, Chrome 10+, IE9+, Opera 12.1+ ◦ IE9: -ms-transform-origin ◦ Chrome: -webkit-transform-origin

10  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+

11  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

12  určuje dobu přechodového efektu  hodnota: sekundy(s), milisekundy(ms) ◦ 200ms = 0.2s

13  změna rychlosti animace  hodnoty ◦ ease, linear, ease-in, ease-out

14  nastavení prodlevy, než animace začne  hodnota: v sekundách  výchozí hodnota: 0 – přechod začne ihned

15  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;