javascript - CSS 从中心向后翻译？

Question

所以我写了一些代码来将我的框从窗口上的某个位置转换到中心，并且我有原始位置说，例如: 原装盒

{
    top: 52.16538619995117, 
    right: 685.6694946289062, 
    bottom: 214.66795349121094, 
    left: 523.1669311523438, 
    width: 150
}

原来盒子的宽/高是150px，移到中心后变成了300px。一些基本代码通过以下代码将其重新定位到中心:

top = window.innerHeight / 2 - currentPosition.top - 150 /2 
left = window.innerWidth / 2 - currentPosition.left - 150 /2 

现在假设组件的新坐标是: 居中框

{
    top: 74.78038787841797, 
    right: 928.7755126953125, 
    bottom: 374.7803955078125, 
    left: 628.7755126953125, 
    width: 300
}

我很难把它重新定位回中心:

transform: "translate(xTarget, yTarget)";

这应该比我想象的要容易得多，但由于某种原因，它总是与原来的不同。

这是我编写的用于帮助确定平移坐标的函数:

getCoordinateTarget(target, offset, currentNotePosition) {

        const xDifference = target.left - currentNotePosition.left;
        const yDifference = target.top - currentNotePosition.top;
        const xTarget = xDifference > 0 ? xDifference - offset.x : -Math.abs(xDifference) - offset.x;
        const yTarget = yDifference > 0 ? yDifference - offset.y : -Math.abs(yDifference) - offset.y;

        return {
            y: yTarget,
            x: xTarget
        };
    }

Answer 1

伙计，我对 CSS 转换的工作方式有很大的误解。所以我最初用翻译移动它，我所要做的就是将转换设置为空，组件将重新定位回原始位置。

字面意思是 transform: "";