Transformácie a animácie pomocou CSS3
Na tejto prednáške si ukážeme ešte zopár vlastností verzie CSS3, ktoré sa zvyknú v praxi miestami používať a v niektorých prípadoch vedia naozaj pekne obohatiť dizajn stránky. Začneme tým, že pomocou CSS vieme teraz jednotlivé elementy transformovať, podobne ako v grafických programoch pri práci s obrázkami. Slúži na to vlastnosť transform (transformácia), ktorej rôzne hodnoty predstavujú rôzne operácie. Medzi operácie, ktoré sa dajú uskutočniť pomocou CSS patrí napríklad posunutie objektu (vymedzenie v pixeloch z pozície, na ktorej by mal byť), zväčšovanie a zmenšovanie, skryvenie a podobne.
Nejdeme si všetky tieto typy preberať, ukážeme si jednu, ktorá sa zvykne používať a to je hodnota na otočenie objektu. Jej názov je rotate (otočiť) a jej hodnota je záporná alebo číselná hodnota vyjadrujúca stupeň uhla. Záporná hodnota v tomto prípade určuje otočenie proti smeru hodinových ručičiek a kladná hodnota pre smer hodinových ručičiek. Hodnota je zadaná v okrúhlych zátvorkách, vyjadrená číselne v stupňoch deg (degree – stupeň). Ako sme povedali, vieme pomocou nej nejaký objekt natočiť. Využíva sa to najmä v prípadoch, kedy napríklad v rohu obrázku chceme zobraziť nejaký nápis šikmo (akcia, zľava, výpredaj) alebo aj vo veľa iných prípadoch, kedy je výhodné mať niečo natočené. Vyzerá to nejako takto:
fotogaleria.php:
…
<h2 style="text-shadow: 4px 4px 5px #5b6b78;">Na tento text sme si aplikovali shadooooooow!</h2>
<div style="width: 50px; height: 50px; background-color: yellow; transform: rotate(-80deg);">Tocim sa...</div>
<div style="width: 80px; height: 20px; background-color: red; color: white; margin-left: 50px; margin-bottom: 50px; transform: rotate(45deg);">AKCIA</div>
...
Ako vidíte, prvý div sme otočili proti smeru hodinových ručičiek a druhý v smere o presne polovicu pravého uhla (45 stupňov). Toto bola typická ukážka transformácie v rozmere 2D – v dvoch dimenziách, čiže po osi x (horizontálne) a po osi y (vertikálne). Transformáciu 2D si môžete predstaviť, že je to akokeby práca s objektom, ktorý je plošný, akokeby nakreslený na papieri. Dve dimenzia značia, že s tým môžeme robiť iba to, čo by sme mohli aj s tým papierikom položenom na stole.
Niečo navyše sa dá s tým papierikom robiť, ak ho zdvihneme zo stola a držíme ho v rukách. V tom prípade s ním vieme robiť 3D transformácie, čiže navyše tretia dimenzia – po osi z (do priestoru – vpredu dozadu). V tomto prípade vieme objekt otáčať nie len ako keby na stole buď v smere alebo proti smeru hodinových ručičiek, ale aj v priestore. Dosť často sa používa takáto transformácia na to, ak chceme niečo zobraziť zrkadlovo otočené.
Podľa osi x, čiže akokeby preklopené zhora na dole vieme otáčať metódou rotateX, kde do zátvorky podobne ako pri 2D metódach zadávame číselne počet stupňov, o koľko chceme objekt otočiť. Analogicky k tomu vieme otočiť aj podľa osi y pomocou metódy rotateY. Vyzerá to asi takto:
fotogaleria.php:
…
<div style="width: 50px; height: 20px; background-color: red; color: white;">Domov</div>
<div style="width: 50px; height: 20px; background-color: red; color: white; margin-top: 5px; transform: rotateX(180deg);">Domov</div>
<br>
<div style="width: 50px; height: 20px; background-color: red; color: white; display:inline-block; transform: rotateY(180deg)">Home</div>
<div style="width: 50px; height: 20px; background-color: red; color: white; display:inline-block;">Home</div>
…
Ako vidíte na výsledku ukážky kódu, vytvorili sme dve dvojice divov s textom, kde prvá dvojica je otočená zrkadlovo podľa osi x (zhora nadol) a druhá podľa osi y (zľava doprava). Skúste sa pohrať s hodnotami vo webových nástrojoch, aby ste videli, ako to funguje...
Úplne najkrajšia vec na CSS3 je ale tá, ktorú si vysvetlíme teraz na záver tejto prednášky a o to viac, že sa dá aplikovať na takmer akúkoľvek zmenu elementu. O čo ide? Predstavte si, že s nejakým elementom v istom momente vykonávame grafickú zmenu, napríklad po kliknutí, v stave hover a podobne. Zmenou by mohlo v tomto prípade byť zmena rozmerov (zväčšenie, zmenšenie), zmena farby, transformácia, jednoducho hocičo, čo graficky nejako ten objekt zmení. Určite ste sa stretli s takým niečím, že keď ste sa na nejakej stránke nad niečo zobrazili myšou (hover), tak to zmenilo grafický vzhľad, ale nestalo sa tak hneď v danom okamihu.
Na našej stránke pri tabuľke v stave hover meníme farbu riadka. Ak sme myšou mimo riadka, má svoju základnú farbu, ale akonáhle sa myšou zobrazíme ponad riadok, okamžite zmení farbu – farby akokeby preskočili hneď z jednej na druhú. V CSS3 však existuje vlastnosť s názvom transition (prechod, premena), pomocou ktorou vieme túto zmeny oddaliť/spomaliť. Čiže farby by nepreskočili hneď, ale zmena by trvala istý moment okom rozoznateľný, takže farby akokeby sa preliali z jednej do druhej. Tento efekt je pre oko veľmi pekný, dá sa použiť na veľa rôznych grafických zmien objektu.
Pri zadávaní tohto efektu musíme špecifikovať dve veci. Prvou je na akú vlastnosť, resp. na zmenu akej vlastnosti má transition byť aplikovaný a následne v sekundách číselne zadať, koľko to má trvať (je možné zadať aj desatinné číslo). Vyzerá to asi nejako takto:
fotogaleria.php:
…
<div class="div_effect"></div>
…
global.css:
/**********TRANSITION***********/
.div_effect{
width: 100px;
height: 50px;
background-color: yellow;
transition: width 2s, height 2s, background-color 2s;
}
.div_effect:HOVER{
width: 200px;
height: 100px;
background-color: pink;
}
Pozrite sa na ukážku a vyskúšajte myšou behať striedavo ponad objekt a mimo neho. Ako vidíte, jeho zmena sa prelína plynulo. Docielili sme to nastavením transition na zmenu naraz troch rôznych vlastností objektu, ktoré sme oddelili čiarkou. Pekné nie? Týmto štýlom viete takéto zmeny spomaliť a spraviť ich plynulejšie na rôzne zmeny, aj napríklad na zadanie marginov, paddingov a podobne (čiže posun objektu – bude sa hýbať plynulo).