Question

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.

Answer 1

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/