为什么`transform：Perspective（1px）translateZ（0）`应用于此CSS过渡？ [重复]

Question

此问题已经在这里有了答案：

• CSS performance relative to translateZ(0)5个答案

昨天我使用hover.css中的摘录。我对CSS非常了解，可以理解这里发生的情况，除了一行以外，即transform: perspective(1px) translateZ(0);。我试图将确切的值输入this demo on MDN，但是，这给了我疯狂的结果。 （我怀疑这是某种渲染次优化（例如transform: scale(0.99)，我之前记得有点过），但是我可能错了。还是堆栈上下文？）。有人可以解释吗？谢谢。

.hvr-underline-reveal {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0); /* <-- what is going on here? */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}    

.hvr-underline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    transform: translateY(4px);
    transition: transform 0.3s ease-out;
}

.hvr-underline-reveal:hover:before {
  transform: translateY(0);
}

<div class="hvr-underline-reveal">You'll see a thick underline if you hover me</div>
<p>But do I really need perspective and Z axis transition? What is it good for?</p>

Answer 1

Z平面中的“无用”变换通常用于修复在翻译或过渡某物时或由于某种其他原因迫使浏览器使用硬件加速/ GPU时发生的模糊渲染。

例如，请参阅此处CSS transition effect makes image blurry / moves image 1px, in Chrome?