Animated 3D Pixel Font with CSS3
Click on a letter, or use your keyboard!
(You'll need a somewhat recent version of Chrome, Firefox, or Safari.)
Linux users get no 3d transform love apparently :(
Click on a letter, or use your keyboard!
(You'll need a somewhat recent version of Chrome, Firefox, or Safari.)
Linux users get no 3d transform love apparently :(
This little experiment is basically a modificaction of Peter Magenheimer's Animated Pixel Font with CSS3 that includes CSS3 3D transforms. Just like Peter's experiment this is pretty much pure HTML5 and CSS3, with only minor touches of jQuery to add keyboard support and to fix certain bugs that arose during the creation of the experiment.
The source code has been posted on GitHub for your studying and forking pleasure.
For now this demo should work on Safari and Chrome under Windows and Mac OS X; for some odd reason I couldn't get 3D transforms to work on my Linux box.
As I said this experiment is a rewritten version of Peter Magenheimer's experiment; I even tried to replicate the layout and just added minor changes.
The typeface used for the titles is called Yellowtail and is available on Google Web Fonts.