Javascript 如何使用css3 translate移动到绝对位置

如何使用css3转换为绝对位置。它似乎总是相对于我的当前位置（其中我的当前位置为0,0）进行转换，但我更希望它相对于屏幕进行转换，以便屏幕的左上部分为0,0

---

例如，我希望能够使用绿色框的offset（）位置将红色框（单击时）移动到绿色框上。（注意：我想用css3平移非左/顶绝对坐标来完成此操作）

这里，在函数“flyToBox2（）之前添加此项

改变

translate('#box1',30,30, '1s');

到

---

不幸的是，JSFIDLE现在已经关闭了，否则我也会添加一个指向小提琴的链接

下面是我如何完成它的

function translateToAbsolute(sel, x, y, dur)
{
    var offset = $(sel).offset();

    var newX = -offset.left+x;
    var newY = -offset.top+y;

    $(sel).css('transition','all '+dur+' ease');
    $(sel).css('transform','translate('+newX+'px,'+newY+'px)');
}

---

用容器div包装盒子，并获得盒子相对于容器div的位置。然后从容器内的位置减去该值，并添加你想要盒子到达的目的地。也就是说，如果你的盒子的位置是从左边100像素，从上面100像素，（得到距离），从你的位置减去，然后加上目的地：100-100+30+“像素”。现在，您正在将30添加到现有的100，这意味着长方体相对于自身定位

。如果属性的值不同于“无”，则将创建堆叠上下文。在这种情况下，对象将充当其包含的位置：固定元素的包含块。

Source:ctwheels，这是一个不错的解决方案，谢谢。虽然没有把盒子放在容器中，但是只取每个盒子的偏移量（）

translate('#box1',-myVarW+30,-myVarH+30, '1s');

function translateToAbsolute(sel, x, y, dur)
{
    var offset = $(sel).offset();

    var newX = -offset.left+x;
    var newY = -offset.top+y;

    $(sel).css('transition','all '+dur+' ease');
    $(sel).css('transform','translate('+newX+'px,'+newY+'px)');
}