CODEWITHSUNDEEP
javascripthtmlcss
dev.meghraj
dev.meghraj

Reputation: 9120

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

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
enter image description here

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?

Upvotes: 0

Views: 320

Answers (1)

Shouvik
Shouvik

Reputation: 11740

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

Upvotes: 1

Related Questions