JSFiddle - React, Tailwind, and code Playground
HTML
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="output"></div>
<div id="marker"></div>
CSS
#marker {
position:absolute;
top:50px;
left:50px;
width: 5px;
height:5px;
background-color:red;
}
#a {
position:absolute;
top:0;
left:0;
width: 100px;
height:100px;
background-color:yellow;
}
#b {
position:absolute;
top:50px;
left:50px;
width: 100px;
height:100px;
background-color:green;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#c {
position:absolute;
top:50px;
left:200px;
width: 50px;
height:50px;
background-color:orange;
}
#output {
width: auto;
height: auto;
font-size: 11px;
position: absolute;
top: 300px;
}
JavaScript
$(document).click(function (e) {
var hitElements = getHitElements(e);
var output = $('#output');
output.html('');
for (var i = 0; i < hitElements.length; ++i) {
output.html(output.html() + '<br />' + hitElements[i][0].tagName + ' ' + hitElements[i][0].id);
};
});
var getHitElements = function (e) {
var mx = e.pageX;
var my = e.pageY;
var hitElements = [];
$(':visible').each(function () {
//Parse CSS matrix
var matrix = [];
var matrixVal = $(this).css('transform');
if(matrixVal != "none"){
var matrixParsed = matrixVal.substr(7, matrixVal.length - 8).split(',');
for(var i in matrixParsed) matrix[i] = parseFloat(matrixParsed[i]);
} else {
matrix = [1, 0, 0, 1, 0, 0];
}
var hW = this.offsetWidth / 2; //Half of width
var hH = this.offsetHeight / 2; //Half of height
var o = { x: this.offsetLeft + hW, y: this.offsetTop + this.offsetHeight / 2} //Transform origin
//Define shape points and transform by matrix
var p1 = {
x: o.x + matrix[0] * -hW + matrix[2] * -hH + matrix[4],
y: o.y + matrix[1] * -hW + matrix[3] * -hH + matrix[5]
}; //Left top
var p2 = {
x: o.x + matrix[0] * +hW + matrix[2] * -hH + matrix[4],
y: o.y + matrix[1] * +hW + matrix[3] * -hH + matrix[5]
}; //Right top
var p3 = {
x: o.x + matrix[0] * +hW + matrix[2] * +hH + matrix[4],
y: o.y + matrix[1] * +hW + matrix[3] * +hH + matrix[5]
}; //Right bottom
var p4 = {
x: o.x + matrix[0] * -hW + matrix[2] * +hH + matrix[4],
y: o.y + matrix[1] * -hW + matrix[3] * +hH + matrix[5]
}; //Left bottom
//Calculate edge normal vectors & C vars
var v1 = { x: -(p2.y - p1.y), y: (p2.x - p1.x) }; //Top
var v2 = {...