Compute the 4 vertices a,b,c,d absolute coordinates of any, deep, transformed, positioned DOM element.
a b
+--------------+
| |
| el |
| |
+--------------+
d c
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: }
}
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();
xxxxxxxxxx<html><head> <meta charset="utf-8"> <title></title> <style> .scene {perspective:250px;} .scene, .camera {width:100vw; height:100vh;} .camera, .camera * {transform-style:preserve-3d;} .camera { transform:rotateX(15deg) rotateY(5deg) scale(1.1); background:rgba(255,255,255,.5); } div { display: inline-block; background: rgba(255,0,0,.5); width: 100px;height:50px; box-shadow: 0 0 0 1px pink inset; } #a { position:relative; margin-left:50px;margin-top:100px; transform:translate(200px, 150px) rotate(-10deg) translateZ(50px); transform-origin:center; } #b { margin-left:100px; transform:translate(100px, 50px) rotate(-10deg) translateZ(50px) rotateX(-20deg); transform-origin:center; } #c { /*transform:translateY(100px);*/ } #d { margin-top:10px; margin-left:50px; } #e { transform:translateY(30px); } #f { position:absolute;left:100px;top:50px; transform:translate(-50px, 50px) rotate(5deg); transform-origin:right top; } #g { position:fixed;left:100px;top:50px; transform:scale(2) translate(-60px, 30px) rotate(20deg); transform-origin:right top; } </style></head><body style="margin:0;"> <div class="scene"><div class="camera"> <div id="a"> relative;A;(50,100);t(200,150)r(10)tz(50);center <div id="b"> static;B;(100,0);t(100,50)r(-10)tz(50)rx(-20);center <div id="c"> static;C;(0,0);;center <div id="d"> static;D;(50,10);;center <div id="e"> static;E;(0,0);ty(30);center <div id="f"> absolute;F;(100,50);t(-50,50)r(5);right top <div id="g"> fixed;G(100,50);s(2)t(-60,30)r(20);right top </div> </div> </div> </div> </div> </div> </div> </div></div><script src="https://code.jquery.com/jquery-3.3.1.js"></script><script src="domvertices.js"></script><script src="jquery.domvertices.js"></script><script>var $els = $('#a, #b, #c, #d, #e, #f, #g');$.fn.domvertices.defaults = {append: $('.scene')};$els.each(function (i, el) { $(el).domvertices().trace();});$(window).resize(function () { $.fn.domvertices.v.forEach(function (v) { v.update(); v.trace(); });});</script></body></html> https://code.jquery.com/jquery-3.3.1.js