Usage
This WebGL visualization demonstrates a JavaScript utility that calculates the absolute coordinates of any DOM element's four corners (a, b, c, d) in 3D space, accounting for complex CSS transforms, positioning, and perspective. The demo renders a 3D scene with several colored rectangles positioned and transformed in space, displaying the computed vertices as 3D points overlaid on the elements. Using the `domvertices` library, the visualization computes and traces the exact 3D bounding corners of each element, even when deeply nested or transformed, by walking up the DOM and applying computed styles and matrix multiplications. A jQuery plugin allows easy integration, and vertices can be traced or erased for debugging, all rendered via WebGL for an interactive perspective view.
AI-generated descriptionCompute the 4 vertices a,b,c,d absolute coordinates of any, deep, transformed, positioned DOM element.
a b
+--------------+
| |
| el |
| |
+--------------+
d c
Usage
var el = document.getElementById('foo');
var v = domvertices(el);
console.log(v);
outputs:
{
a: {x: , y: , z: },
b: {x: , y: , z: },
c: {x: , y: , z: },
d: {x: , y: , z: }
}
jQuery plugin
var $el = $('#foo');
var v = $el.domvertices();
console.log(v);
you can also trace vertices for debug purpose:
v.update().trace();
or remove the trace:
v.erase();