html - 无法确定 CSS 的变换比例起点

Question

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

单击图像时，我将通过原始 x,y 坐标，然后从现有边距和页眉中减去偏移值，将单个图像移动到新位置。这很好用，但是，一旦我在转换过程中将图像从 150px 缩放 .5 到 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 像素，然后应用变换。