Question

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

例如，我希望能够使用绿框的偏移（）位置将红色框（点击时）移动到绿色框上。（注意：我想用css3翻译而不是左/上绝对坐标）

Answer 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目前正在下降，否则我会包含一个小提琴的链接

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

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

2 个答案: