JavaScript/jQuery：如何在元素(DIV)旋转后获取它的实际原始位置

Question

我有一个div元素，使用-webkit-transform: rotate(45度)进行旋转。如果我想在旋转后访问它的当前位置，像这样

var x = $('#tap-area').offset().left;
var y = $('#tap-area').offset().top;

它返回的不是原始左上角位置的实际值，而是整个div的边界框的左上角位置(物理上最远的左上角，在div之外)。

如何计算/获取div旋转后的原始左上角

如:如果我把它旋转90度，我现在想要得到的值就是右上方。如果我把它旋转180度，我现在想要得到的值将是右下方。

我需要这个，所以我可以设置另一个DIV元素总是附着在元素的原始左上角，这样它就会根据它的旋转方式改变它的位置。

谢谢。

Answer 1

可以使用:

获取元素的绝对位置:

<element>.getBoundingClientRect()

这将为您提供以屏幕左上角为原点的AABB(轴对齐边界框，或Min-Max-Box)。(MDN)

如果你需要访问元素左上角的位置，你也可以旋转它的原始位置向量，这是一个简单的矩阵乘法。你应该记住，旋转中心默认是元素的中心，但也可以通过css设置为不同的位置。

祝你好运!

Answer 2

这是我面对同样的问题后得出的解决方案:

// Initial data with TOP AND LEFT OF THE BOUNDING BOX (not x,y of top left point of     the box but left margin of the bounding box   and top margin of the bounding    box)
var top  = Math.ceil($('#' + id).position().top);
var left = Math.ceil($('#' + id).position().left);
var wi   = $('#' + id).css("width").replace("px","");
var he   = $('#' + id).css("height").replace("px","");
var rot  = $(this).data(id + ".ROTACION"); //There I have the applied rotation stored ...
// CALULATIONS
var swapheightwidth= false;
    //Let's keept it first cuad. 
if (rot > 270)
{
    rot = rot - 270;
    swapheightwidth= = true;
}
else if (rot > 180) 
{
    rot = rot - 180;
}
else if (rot > 90) 
{
    swapheightwidth= = true;
    rot = rot - 90;
}
if (swapheightwidth)
{
    var calculatedX=  left + (wi * sin(rot)); 
    var calculatedY=  top + (wi * cos(rot));
}
else
{
    var calculatedX=  left + (he * sin(rot)); 
    var calculatedY=  top + (he * cos(rot));
}
var xbott = left;
var ybott =  Math.ceil(calculatedY);
var xtop=  Math.ceil(calculatedX);
var ytop= top;
    // FINAL CALCULATED POINTS
// xtop  ytop  -> top left
// xbott  ybott   -> bottomleft 
function sin(x) {
    return Math.sin(x / 180 * Math.PI);
}
function cos(x) {
    return Math.cos(x / 180 * Math.PI);
}

欢呼