CSS3 – Transforms
Konzorcium W3 ma už nejaký ten mesiac rozpracovanú vlastnosť pre CSS a to CSS Transforms. Kedže podpora prehliadačov je zatiaľ takmer nulová, v tomto článku napíšem aspoň pár základov.
CSS Transforms pracujú nezávislé na sebe, čiže animovať naraz je možne viac prvkov.
Základná vlasnosť určujúca plynulú animáciu je transition. Transition v prekladé znamená pohyb. Bez tejto vlastnosti plynulý efekt animácie neurobíme. Potom sú to vlastnosti:
- translate – pohyb elementu, nastavujú sa hodnoty (0,0). Kladné hodnoty určujú pohyb v smere hodinových ručičiek, záporné naopak.
- rotate – rotácia v stupňoch, napr. (20deg).
- scale – zväčší element, napr. scale(2).
- skewY – naklánanie objektu podla zvolenej osy, napr. skewY(-30deg).
Pokiaľ chceme napríkad iba plynule zmeniť farbu pozadia elementu, použijeme transition: all 1s a ako hover efekt nastavíme napríklad červenú farbu. Prechod zmeny bielej farby pozadia na červenú bude trvať jednu sekundu. Takímto spôsobom môžme elemenť aj zvačšiť, meniť mu border a pod.
Ako pracujú vlastnosti rotate, translate a scale si môžte pozrieť v daľšom príklade
Ďaľší zaujímavý príklad:
A nakoniec jeden veľmi praktický príklad, ktorý určite všetci dobré poznáte, avšak v prevedeni Ajaxu.
Je dobré vyvijáť veci ako jQuery? Nebude časom na takéto veci postačovať CSS?
Podpora od: Safari 3, Google Chrome 0.4, Opera 10.50, Firefox 3.7
Podobné články:
“Je dobré vyvijáť veci ako jQuery?”
Je to potrebné, ak chceme takéto oživenie stránok. Samozrejme, že všetci by sme to radi robili iba pomocou CSS, ale ako sám uvádzaš, podpora od Safari 3 a Google Chrome 0.4.. To je síce fajn, ale koľko ľudí tieto prehliadače používa resp. nepoužíva?
Možno časom bude postačovať na takéto srandičky CSS, ale predpokladám, že ten čas bude veľmi dlhá doba…
ano, to som si hovoril aj ja.. este v roku 2004 sa kazdy stazoval nad slabou podporou napr. css3 selektorov, no dnes je to uz omnoho lepsie.. nehovorim, ze to treba hned vyuzivat, no naskyta sa otazka, ze ked budu mat napr. css animation podporu 100% (ie, opera, firefox, atd), ci ich budu ludia pouzivat.. miesto jq
Ja by som len dodal, že Firefox podporuje síce -moz-transform, ale nie -moz-transition, čiže sa dá objekty otáčať, ale nie používať plynulý prechod.
A bonus, ‘obľúbený’ Internet Explorer podporuje takéto srandy cez svoj Matrix Filter.