请向我解释这个CSS属性如何从转换中删除尾随行

Question

这是一个冗长的问题，但我希望有人可以为我解决这个问题。我有两个问题：

1. 为什么CSS属性不能做它应该做的事情。
2. 为什么这个特殊的CSS属性适用于一个毫无疑问的元素，以及为什么它不适用于CSS :hover选择器。

创建了一个flipcard动画。转换时出现了一些图形/尾部线问题（在Chrome中）。

做一些谷歌搜索，我发现显然，使用-webkit-transform: translate3d(0,0,0);应该通过使用硬件加速来解决问题。

但是，我无法弄清楚这个CSS属性的位置。我尝试将它放在.flipcard-container，.flipcard上，实际转换（.flipcard-container: hover .flipcard）。

这些都没有删除动画引起的尾随行。

Question 1: Where can I use the -webkit-transform: translate3d(0,0,0); properly in order to take advantage of the hardware acceleration, and why does/doesn't it work there?

但是，在做了更多谷歌搜索和复制其他人的代码后，我发现添加perspective: 600pxto .flipcard-container以某种方式解决了这个问题。最重要的是，它甚至让我的动画效果非常好。

它不应该打扰我这么多，但这样做我无法弄清楚为什么这有效。

根据MDN文档：

透视CSS属性确定z = 0平面与用户之间的距离，以便为3D定位元素提供一些透视。

Question 2: Why does this work in my transition so well? Shouldn't I have to place perspective in .flipcard-container: hover .flipcard instead of the .flip-container?

当然，当将它放在css :hover选择器中时，整个过渡停止工作。 perspective属性是否也使用硬件加速？

这是代码，并提前谢谢。

.flipcard-container {
  height: 400px;
  width: 300px;
/* uncommenting the below property will fix the issue */
/* -webkit-perspective: 600; */

}

.flipcard-container:hover .flipcard {
  transform: rotateY(180deg) scale(1.5);

}

.flipcard, .front, .back {
  width: 100%;
  height: 100%;
}

.flipcard {
  transform-style: preserve-3d;
  transition: all .8s ease-in-out;
}

.front {
  background: #6093e5;
  position: relative;
  backface-visibility: hidden;
  
}

.back {
  background: #e56060;
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  transform: rotateY(180deg);
}

<div class="flipcard-container">
  <div class="flipcard">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

Answer 1

问题1 您正在使用硬件加速覆盖transform:标签。如果您将动画放入，则会导致动画不起作用。

您可以使用它来存档更好（更稳定的fps）

.flipcard-container:hover .flipcard {
     transform: rotateY(180deg) scale(1.5);
     will-change: -webkit-transition;
     will-change: transition;
}

它使用新的will-change属性。 More details

will-change CSS属性为作者提供了一种方式来提示浏览器关于元素上预期的更改类型，以便浏览器可以在元素实际更改之前提前设置适当的优化。这些优化可以通过在实际需要之前提前执行可能昂贵的工作来提高页面的响应性。

问题2 如果你看一下，例如这个： https://codepen.io/jfcorugedo/pen/bBPWaO?q=3d+turn&limit=all&type=type-pens

你看它也使用perspective标签。使用它可以看到盒子的旋转（就像你的情况一样）。如果你删除它，它看起来像你的代码。它仅适用于容器，因为要翻转的对象包含在其中。

如果你有更多问题，请问:)