My Opera3D Ball in a Hollow Tube, Html+CSS3
Saturday, December 3, 2011 12:19:53 AM
A proof of concept for a game I am developing, moving a ball through the hollow walls of a square tube, developed using Html, CSS3, and a bit of Javascript. No VRML, no SVG, no Flash, no Silverlight. Your challenge: move the red ball. Best viewed in Webkit browsers like Chromium, Google Chrome, or Safari. http://www.omegajunior.net/code/squaretube3d.html
A proof of concept for a game I am developing, moving a ball through the hollow walls of a square tube, developed using Html, CSS3, and a bit of Javascript. No VRML, no SVG, no Flash, no Silverlight. Your challenge: move the red ball. Then dive into the source code.
http://www.omegajunior.net/code/squaretube3d.html
Additions to come: motion detection for handheld devices, rolling the ball, making it work in Firefox and Opera.
The ball and the two tubes are composed entirely out of regular divs and figures. CSS3 translateX, Y, and Z are used, in combination with perspective settings (currently only for Webkit browsers like Chromium, Google Chrome, or Safari).
What baffled me most was the actual effect of the 3D translation: precisely in what direction the planes were being rotated and why, and as a result of that, how to move them in order to create a tube or ball, took quite a bit of time to figure out. I hope my proof of concept will help others get up to speed.
Another thing to consider once you start working with 3D CSS, is that border thickness of a plane will prove important. For instance: I had imagined the ball to measure 50pt in diameter. Due to a 1pt thickness of the walls, the ball diameter got reduced to 48pt. This is something those of us used to working in 3D already know, but for the general flat website designers, this is something to learn.
Suggestions welcome!
