3D Bookmarklet - Enjoy 3D world on the Web by CSS3

The 3D Bookmarklet is a bookmarklet which allows you to dive into the 3D-world on the Web. CSS3 capable browser is needed. Firefox 3.5 and Chrome 5 is tested.

* Get the 3D bookmarklet

Drag the link [3D] onto your browser's bookmark toolbar, etc.

* Try now on this page

Every 2D websites will come into 3D with this. You need to have a red/blue (anaglyph) 3D glasses by yourself. The CSS3 standard allows iPhone and iPad to run this. Enjoy 3D everywhere!

Gugod and I have corroborated to the code snippet as a result from the OSDC.TW Hackathon.

How this works

This sets all text's CSS color property to red, and also sets text-shadow property to blue on right. Gugod gave me an idea to hack to draw with alpha channel using rgba(). Each 3D layer, depth, is depend on sort of its element and font size. Firefox seems not to allow !important within element's style attribute. Chrome however does. Only texts are made into 3D. Images are not yet at this version.

* See also the original post in Japanese. (日本語)


Hualien is a city located at East Coast of Taiwan. You may know everybody in town there wears 3D glasses to enjoy 3D world. :)