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

【问题标题】：How to use css3 translate to move to an absolute position如何使用 css3 translate 移动到绝对位置
【发布时间】：2014-08-07 08:59:35
【问题描述】：

如何使用 css3 转换为绝对位置。似乎它总是相对于我当前的位置（我的当前位置是 0,0）进行平移，但我宁愿它相对于屏幕进行平移，以便屏幕的左上角为 0,0。

http://jsbin.com/qujabe/1/edit

例如，我希望能够使用绿框的 offset() 位置将红框（单击时）移动到绿框上。（注意：我想用 css3 转换而不是左/上绝对坐标）

【问题讨论】：

用容器 div 包裹盒子，并获取盒子相对于容器 div 的位置。然后从容器内的位置减去该值并添加您希望您的盒子去的目的地。 IE。如果您的盒子的位置是距左侧 100 像素，距顶部 100 像素，（获取距离）并从您的位置减去并添加目的地：100-100+30 +“像素”。截至目前，您正在将 30 添加到现有的 100 中，这意味着盒子正在相对于自身定位自身
If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains. 来源：developer.mozilla.org/en-US/docs/Web/CSS/transform#summary
ctwheels，不错的解决方案，谢谢。尽管如此，而不是将盒子放入容器中，只需获取每个盒子的 offset()

标签： javascript css

【解决方案1】：

在这里，在你的函数“flyToBox2()”之前添加这个

var myVarW = $("#box1").offset().left;
var myVarH = $("#box1").offset().top;

改变

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

到

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

不幸的是 jsfiddle 目前已关闭，否则我也会包含指向小提琴的链接

【讨论】：

【解决方案2】：

这就是我最终的做法。

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

【讨论】：