HOW TO: make text move on 3d circular surface in css3?

Question

i want to make text move in 3d circular surface. but i don't know how to do it. i tried lot searching, but found nothing, and i am not expert in css3.

as in this pic

i can afford extra markup for each font, on hover i want to make it move and come in front?

how is it possible in our new css3?

Answer 1

Okay, I can't seem to see exactly what you want to showcase using that image link. I checked out the history and saw that you posted the image of three alphabets. Now CSS3 is awesome because you don't need to use JS anymore for funky animations, you could so this using various js functionalities from already existing functions on libraries. Or you can check out the Zoom function in CSS.

HTML

Mouse over the links to see them change layout.

<div style="display:inline-block">
<p><a class="ex1" href="default.asp">M</a></p>
<p><a class="ex2" href="default.asp">M</a></p>
<p><a class="ex3" href="default.asp">M</a></p>
</div>

CSS

a.ex1:hover,a.ex1:active {zoom:150%;}
a.ex2:hover,a.ex2:active {zoom:150%;}
a.ex3:hover,a.ex3:active {zoom:150%;}

For hover, just used the onmouseover or hover functionality for the same. Example