GWEB2

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

2. Obsah přednášky • transformace • přechody

3. Transformace • 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. Posun prvku • hodnota translate(x,y) vlastnosti transform • posun o x zleva a y shora • i záporné hodnoty • translatexvlastnosti transform • svislý posun • translatey vlastnosti transform • vodorovný posun • nemá dopad na tok dokumentu – okolní prvky se nepřizpůsobují změnám

5. Změna velikosti • 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 • scalexvlastnosti transform • změna pouze ve vodorovném směru • scaleyvlastnosti transform • změna pouze ve svislém směru • nemá dopad na tok dokumentu – okolní prvky se nepřizpůsobují změnám

6. Rotace • 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. Zešikmení • 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. Transformace • můžeme definovat více hodnot • jednotlivé hodnoty oddělujeme mezerou

9. transform-origin • 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. Přechody • 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. transition-property • 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. transition-duration • určuje dobu přechodového efektu • hodnota: sekundy(s), milisekundy(ms) • 200ms = 0.2s

13. transition-timing-function • změna rychlosti animace • hodnoty • ease, linear, ease-in, ease-out

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

15. Přechody • 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;