如何平滑基于 CSS 的文本 3D 翻译？

Question

我在互联网上进行了大量的挖掘，但没有找到一个看似相当简单的问题的解决方案，即翻译包含文本的支架，并使该文本顺利移动。

这是一个问题的例子，你可以看到文本一步一步地跟随它的持有者，而不是顺利：

我还做了一个CodePen demo来现场看看效果：

https://codepen.io/Durss/pen/ExgBzVJ?editors=1111

var angle = 0;
var radius = 100;
function renderFrame() {
        requestAnimationFrame(renderFrame);
    var cx = document.documentElement.clientWidth / 2;
    var cy = document.documentElement.clientHeight / 2;
    var div = document.getElementById("text");
    var px = cx + Math.cos(angle) * radius;
    var py = cy + Math.sin(angle) * radius;
    angle += .001;
    div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";
}

renderFrame();

body {
  background-color:black;
  width:100%;
  height:100%;
}

#text {
  position:absolute;
  left:0;
  top:0;
  border: 2px solid white;
  background-color: #2f9da7;
  padding: 10px;
  border-radius:20px;
  color: white;
  font-weight: bold;
}

<div id="text">blah blah</div>

基本上，问题在于支架正在亚像素级别移动，但无论我如何尝试，文本位置似乎都是圆形的。 我使用了translate3d()，因此它使用GPU渲染来修复支架的位移，但不修复其文本内容。

div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";

我到处都看到了以下 CSS“解决方案”，但它们对我不起作用：

text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-font-smoothing:none;

Answer 1

will-change: contents;

解决了我在进行变换旋转时出现的抖动文本问题。 这告诉浏览器元素的内容预计会发生变化，因此不应被缓存。

这必须在转换之前立即应用。

Answer 2

CSS 过渡有助于使子像素动画更平滑。

transition: all 0.001s linear;

它在 Chrome 上运行良好，但在 Firefox 上似乎不太有效。 本文可能会有所帮助： Firefox CSS 动画平滑（子像素平滑）

Answer 3

作为解决方法，您可以

Math.round

px 值。这将防止文本自行抖动（使包含 div 的整个内容抖动）。

var angle = 0;
var radius = 100;
function renderFrame() {
        requestAnimationFrame(renderFrame);
    var cx = document.documentElement.clientWidth / 2;
    var cy = document.documentElement.clientHeight / 2;
    var div = document.getElementById("text");
    var px = Math.round(cx + Math.cos(angle) * radius);
    var py = Math.round(cy + Math.sin(angle) * radius);
    angle += .001;
    div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";
}

renderFrame();

body {
  background-color:black;
  width:100%;
  height:100%;
}

#text {
  position:absolute;
  left:0;
  top:0;
  border: 2px solid white;
  background-color: #2f9da7;
  padding: 10px;
  border-radius:20px;
  color: white;
  font-weight: bold;
}

<div id="text">blah blah</div>