JavaScript/jQuery：如何获取元素（DIV）在它之后的实际原始位置'；他被轮换了

我有一个div元素，它通过-webkit transform:rotate（45度）进行旋转。如果我像这样旋转后尝试访问它的当前位置

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

它返回的不是原始左上角所在位置的实际值，而是整个div边界框的左上角（实际上是div之外最远的左上角）

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

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

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

---

谢谢。

您始终可以使用以下方法获取元素的绝对位置：

.getBoundingClientRect（）

这将提供以屏幕左上角为原点的AABB（轴对齐边界框或最小-最大框）。（）

如果需要访问元素左上角的位置，也可以旋转其原始位置向量，这是一个简单的矩阵乘法。您应该记住，旋转的中心在默认情况下是元素的中心，但也可以使用css将其设置为不同的位置

---

祝你好运

始终可以使用以下方法获取元素的绝对位置：

.getBoundingClientRect（）

这将提供以屏幕左上角为原点的AABB（轴对齐边界框或最小-最大框）。（）

如果需要访问元素左上角的位置，也可以旋转其原始位置向量，这是一个简单的矩阵乘法。您应该记住，旋转的中心在默认情况下是元素的中心，但也可以使用css将其设置为不同的位置

---

祝你好运

这是我遇到同样问题后得出的解决方案：

// 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);
}

---

干杯

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

// 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);
}

干杯