为什么要将 transform: perspective(1px) translateZ(0) 应用于此 css 过渡？

Question

昨天我使用了 hover.css. I know CSS well enough to understand what is going on here, except one line, which is transform: perspective(1px) translateZ(0);. I've tried to feed the exact values to 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 平面中的 "useless" 变换通常用于修复在翻译或转换某些内容时或出于某些其他原因强制浏览器使用硬件加速/GPU 时出现的模糊渲染。

例如看这里CSS transition effect makes image blurry / moves image 1px, in Chrome?

为什么要将 transform: perspective(1px) translateZ(0) 应用于此 css 过渡？

Why is `transform: perspective(1px) translateZ(0)` being applied to this css transition?

css

css-transitions

css-transforms