Create 3D image effect with CSS3?

Question

Is there any way to manipulate an image with CSS3/Mootools to create the 3D effect?

Clarifying 3D as in the kind you put on Glasses with red and blue filters on to see the 3D effect. Not just a drop-shadow on a box kinda thing.

If I have a normal photo can I turn that 3D on the fly with CSS or/and Mootools?

Answer 1

No.

You'd need something very specialised (it would probably have to operate with <canvas> or a plugin) to generate such as image even if you had a 3d source to start with (which you don't).

Answer 2

You probably could use box-shadow and text-shadow to achieve this kind of effect at a basic level. Colour your text blue and your text shadow red (and non-blurred).

However this would only work up to a point - there would be things which you simply couldn't do. Text shadow should be able to do this quite effectively, but box shadow would only work in limited cases. Images certainly wouldn't be doable (though I guess you could always serve your images with the colour split already in place), and you'd have to limit yourself to effectively a monochrome page.

It would also mean calculating the whole thing manually when you write your CSS. Hmmm.... fun.