CSS3 + webGL 3D Transforms in sync (Webkit)

The objective is to mix webGL and CSS3 objects and apply transformations to both in sync, such as if they were placed on the same scene. This combination of a DIV container with a WebGL context is needed in order to display dynamic data and UI components such as buttons, select drop-downs or any other HTML component.

This is possible due to the new 3D transforms in CSS3, specially the very useful Matrix3D function available in webkit(Chrome and Safari); the following would be an example of a CSS3 transform property using the Matrix3D funtion with an initial value of identity:

-webkit-transform: matrix3D(
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1);

Having this we can dynamically update it via javascript; therefore, we update (overwrite) the CSS at the same time we update our transformation matrix in WebGL.

For this first try, I am rotating a 3D sphere by using mouse motion, and the same rotation matrix is used by a DIV located over the webGL canvas container.

Please open the following link. Drag the mouse over the earth sphere.

Translating in Z

To make the top DIV layer look  like if it was on top of the globe (webGL object), I added a translation in Z to the current 3D transformations. Since adding positive translation in Z would make the DIV larger, I have to also apply a Scale transformation.

See the results with a translation here:

ONLY WORKS on CHROME and SAFARI
Check WebGL.