与 Css Translate 一起使用时，来自 getBoundingClientRect 的 X 和 Y 值错误答案

【问题标题】：X and Y value from getBoundingClientRect wrong when used with Css Translate与 Css Translate 一起使用时，来自 getBoundingClientRect 的 X 和 Y 值错误
【发布时间】：2019-07-19 08:43:42
【问题描述】：

在反应中，我在选择特定图像时，我会动画从许多图片到一个的转换。

我根据原始点击图像的 x 和 y 位置使用以下 css 动画。它现在是硬编码的。但是，当放入 css 的翻译时，这些值似乎是关闭的，我不知道为什么。

我绝对定位了具有相同值的 div，这是正确的。但是，翻译的起始值不是我要输入的。

@keyframes move-image {
    from {
        transform:  translate( 383.125px, 7.998px) scale(1);
    }
}

.animation {
   animation: move-image 6.6s;
}

这是一个链接。动画 css 位于 css 选项卡中。 https://codepen.io/nickjsdevelope1/pen/QoWEPV

【问题讨论】：

标签： css reactjs dom

【解决方案1】：

翻译考虑初始元素位置来翻译元素，它表现为偏移。它不会将元素翻译到特定位置。当您使用 top/left 定位元素时，同样的逻辑适用。顶部/左侧相对于定位元素的包含块，以防它是绝对/固定元素。

在这两种情况下，它都与原点有一个偏移量，但每个原点都不相同。

为了更好地理解，这里将翻译应用于具有相同值的不同元素：

.box {
  width:50px;
  height:50px;
  background:red;
  transform:translate(50px,50px);
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  transform:translate(50px,50px);
}

<div class="box">

</div>
<div class="box1">

</div>

两个元素在 X 和 Y 轴上都从它们的原始位置偏移了 50px。

当使用 position 和 top/left 时，两者都会重叠，因为它们具有相同的包含块，因此它们从同一点偏移相同的值。

.box {
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  top:50px;
  left:50px;
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  top:50px;
  left:50px;
}

<div class="box">

</div>
<div class="box1">

</div>

【讨论】：