I'd like to build a simple framework which rendering combines web page DOM elements with WebGL, such that they're manipulable in the same coordinate space.
How does the plain CSS coordinate system relate to the one used by WebGL? How can I make sure the two line up (e.g. have a div and a WebGL quad transformed the same way)? Can I expect CSS3D transform coordinates to correspond to WebGL?
They are not. Webgl coordinates refers to the positions of pixels in a canvas element and CSS describes the position of any HTML element in a page. You have to do math to apply the correct transformation if you wish align them. The default coordinate space for webgl is -1 being on one side of canvas and +1 on the other side (assuming viewport is same as whole canvas), with -1,-1 being the bottom left corner of canvas and +1,+1 being the top right.
You just need to find a transformation that maps the left side of canvas (x-position) to -1 in webgl and right side of canvas (x+width) to +1 in webgl and same for Y. Also in webgl the Y coordinate goes upwards from bottom of screen where as in HTML its 0 at top of screen.
