CODEWITHSUNDEEP
htmlcss3d
Paul Rivera
Paul Rivera

Reputation: 565

Is there some Html5/CSS3 trick for floating words "above" a 3D surface?

By 3D surface, I mean a flat surface with a horizon (showing depth from a first person perspective)

The words should appear as if floating above the surface; there should be a shadow cast on the surface. Also, words "further away" would appear smaller than words that are "closer" to the viewer. Lastly, and I think this is actually the hard part (if not altogether impossible with current tech), words should be skewed to show a 3D affect, kinda like a straight road is skewed making it look as if the sides of the roads eventually meet at or beyond the horizon.

I'm looking for a way to do this with normal everyday fonts. I don't want to have to draw characters on a canvas.

Upvotes: 0

Views: 310

Answers (1)

Baxter
Baxter

Reputation: 2456

You'd probably be wanting to use something like:

text-shadow: 12px 12px 12px #000;

and

transform: scale(0.9) rotate(0deg) translate(0px, 0px) skew(20deg, 40deg);

Properties, have a play with them somewhere like http://css3generator.com/

Upvotes: 3

Related Questions