Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 2 years ago.
Improve this question
I stumbled upon this site http://www.swell3d.com/ and I think that in the future we will have a new hype word "3d website" that is used heavily in marketing. However, what I am interested in is how to create such designs/layouts? How is that funny-looking effect actually applied -- and are there any w3 specs describing ways to detect 3d-device or are there a media query for 3d devices like:
@media 3d {
/* 3d related css... */
}
I am just so curious.
The real-3d rendering has to be a feature of the browser/system itself. I think nobody in the future will write 3d webite, the performances (speaking about the speed) will be very slow.
In fact javascript is very very slow to process these complex calculations, and the css standard should be revisited.
The Khronos group is working on a standard, WebGL, with javascript bindings on OpenGL and OpenGL ES, so that browser and embedded systems can use 3D graphics and without the need for any plugin. AMD, Ericsson, Google, Mozilla, NVIDIA and Opera are part of the working group.
http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet/
I believe that it is better to use a 3D screen, like Nintendo's 3DS, instead of forcing people to use 3D glasses. In the nearby future this will surely be an interesting area.
I don't think that websites will be 3D at all in the future. The site has the headline "Experiments in anaglyphic art"; draw your conclusions.
As to creating such a site, I don't think that CSS is going to help you much. CSS3 has a module called 3D Transforms but there's nothing about anaglyphic rendering there.
However, creating anaglyphic graphics is as simple as creating the left-eye image in one colour, the right-eye image in another, and then overaying them. CSS can help you create this effect for text; see this article.
On the site you link to, the banner at the top was done in Flash. The rest are just static images.
