CSS kódok: Animált transformált dobozok CSS kóddal

Itt a megoldás a  hover események kezelésére.

Amikor az egérkurzort rávisszük egy elemre, akkor ahhoz bizonyos funkciókat rendelhetünk, mint például méret növelés, szín megváltoztatás, egyebek. Most már animálhatjuk is ezt az eseményt.Ez a mostani megoldás szigorúan JavaScript nélkül animál. Ez itt a lényeg.Ez a technológia már nem egy nagy újdonság, viszont eddig nem támogatták a böngészők.Sajnos a Firefox jelenleg sem mindigi támogatja. (Illetve a Firefox 4 -ben már benne lesznek a szükséges cuccok.)Az animáls a "transform" attributummal és ehhez kapcsolódó értékekkel történik.Animálhatunk képeket is, így olyan lesz, mint a flash. 

Részletek: 

box 1	Jobbra tolódik: -webkit-transform: translate(3em,0);
box 2	30 fokkal elfordul: -webkit-transform: rotate(30deg);
box 3	Balra lefele tolódik: -webkit-transform: translate(-3em,1em);
box 4	Kiemelkedik: -webkit-transform: scale(2);

Kódja:

<style type="text/css"> .showbox{float:left;margin:4em 1em;width:100px;height:60px;border:2px solid green;background-color:#fff;line-height:60px;text-align:center} .showbox { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } .slideright:hover { -webkit-transform: translate(4em,0); -moz-transform: translate(4em,0); -o-transform: translate(4em,0); } .rotate:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } .slideleft:hover { -webkit-transform: translate(-3em,2em); -moz-transform: translate(-3em,2em); -o-transform: translate(-3em,2em); } .scale:hover { -webkit-transform: scale(3); -moz-transform: scale(3); -o-transform: scale(3); } </style> <div class="showbox slideright"> box 1</div> <div class="showbox rotate" style="border-color: red;"> box 2</div> <div class="showbox slideleft"> box 3</div> <div class="showbox scale"> box 4</div> <div style="clear: left;"> <!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--></div>

DEMO:

box 1

box 2

box 3

box 4

Leírás: SandalPhon