Question

How can I achieve 3D text transformations in perspective using Javascript/CSS.

Solutions using external libraries of Javascript/CSS are also possible

Answer 1

CSS transformations with perspective are only possible with Safari at this point. Alas Chrome, while based on Webkit, and seemingly supporting the proper CSS attributes, will not apply perspective transformations. They will be supported at some point on Firefox, no clue about IE.

Your only other option really is <canvas>. However, just like with CSS transforms, the canvas API only provides functions for “2D” affine transformations (scaling, rotation, skewing). With this the best you can get is an isometric perspective, as that can be achieved with just skewing.

However, since canvas gives you pixel level control over the image, you can fake perspective, though doing so is complex. The obvious way is to use the putImageData function and calculate each pixel using a 3D perspective transform matrix. Obviously you’d need to know some things about linear algebra and trigonometry. Regardless of your math skills, doing 3d transforms at such a low level is extremely costly performance wise, and highly variable between different browsers (Chrome is the fastest by far, Firefox will chug along at fairly low framerates, and Safari is somewhere in the middle).

A better solution performance wise, but similarly complex and math intensive, is to use drawImage to paint an image/text/whatever to canvas one line at a time, and in between each change the canvas’s scaling transform values. This is exactly the method that was used to get perspective on the SNES with mode 7 that natively only supported 2D transformations.

Another method is detailed here.

As you can imagine none of this is trivial, and performance is spotty at best. So if you are not willing to delve into a mass of linear algebra, trigonometry and canvas API documentation, I would say you are pretty much out of luck. Any JS library that does as you ask is subject to all these limitations. I know of a handful of demos out there, but none that could really be called a library (though if someone knows of something I’d be happy to be corrected).

If anyone is interested in the nutty details of any of the approaches I mentioned, I’d be happy to try to lay them out more comprehensively. In the mean time, you can play around with my own demo that uses a combination of the first two techniques I specified.

http://bigmooworld.com/pwings/pilotwings/pilotwings.html

Some of you might recognize it…

Use WASD to pan, up/down to zoom, right/left to rotate, and Q/E to change perspective. Feel free to peruse the code, but be forewarned that it is not well organized or commented, and most of it is discarded junk code.

So anyway my answer is…Yes it is possible, easily in Safari, or with a great deal of effort and shoddy performance in other browsers (and there is probably a way in IE but I have no clue about how).