无法确定CSS的转换比例起点

Question

使用React，我有一组图像，当选择了特定图像时，这些图像会转换为一个图像。我有一个转换动画，可以将状态从许多图像转换为一个图像。

单击图像时，我正在通过原始的x，y坐标，然后从现有的边距和标头中减去偏移值，以将单个图像移动到新的位置。效果很好，但是，一旦在转换过程中将图像.5从150px缩放到300px，x，y坐标就会稍微偏离。

这里的内联css可以在render函数中找到。在setState行81中将SingleImage的高度和宽度更改为150px，将比例缩放为1将显示此问题。

Example with no scaling
Example with .5 scaling from 150px to 300px with undetermined offset

  const a = keyframes`
      from { transform:  translate( ${this.state.cssTransform.x - 12}px, ${this.state.cssTransform.y-72}px) scale(${this.state.cssTransform.scale});                   
      }
    `

    const SingleImage = styled.div`
       animation: ${a}  2.0s;
       height:300px !important;
       width:300px !important;
    `

再一次，在2之间，我不确定为什么会有新的偏移量。它似乎是75px左右。我怀疑是新图像缩小了300px到150px的一半，然后应用了转换像素使其倾斜？

Answer 1

解决方法是从每个x和y偏移量中减去75px。当图像最初从300像素缩小到150像素时，将从每侧减去75像素，然后应用变换。