CSS translateZ( ) 与 scale( ) 中的错误渲染

Question

我注意到以这两种方式转换文本时质量差异很大：

.text1 {
  width: 200px;
  height: 22px;
  position: absolute;
  top: 40%;
  left: 0;
  transform-origin: 50% 50%;
  transform: scale(2); /* here */
  color: red;
  text-align: center;
  font-size: 22px;
}
.text2 {
  width: 200px;
  height: 22px;
  position: absolute;
  top: 60%;
  left: 0;
  transform-origin: 50% 50%;
  transform: translateZ(400px); /* here */
  text-align: center;
  font-size: 22px;
}
.perspective {
  width: 200px;
  height: 200px;
  perspective: 800px;
  transform-style: preserve-3d;
}

<div class="perspective">
  <div class="text1">Text</div>
  <div class="text2">Text</div>
</div>

在 Z 轴上置换文本时，有没有办法强制进行更好的渲染？

Answer 1

您可以为 webkit 添加字体平滑（对于 firefox）和抗锯齿

 .text2 {
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

http://davidwalsh.name/font-smoothing

Answer 2

使用 translateZ(400px) 转换时文本模糊的原因是 这是 3D 转换 ；浏览器将元素视为纹理而不是矢量，以提供硬件 3d 加速。
所以基本上分辨率会随着尺寸的增加而降低。

另一方面缩放变换是二维变换, 浏览器将元素视为矢量，不会发生模糊。

看看当我们用 3d 启动时 scale 会发生什么，但实际上没有设置任何 translateZ 值：

.text1 {
    width: 200px;
    height: 22px;
    position: absolute;
    top: 40%;
    left: 0;
    transform-origin: 50% 50%;
    transform: scale(2);
    /* here */
    color: red;
    text-align: center;
    font-size: 22px;
}
.text1a {
    width: 200px;
    height: 22px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translateZ(0) scale(2);
    /* here */
    color: blue;
    text-align: center;
    font-size: 22px;
}
.text2 {
    width: 200px;
    height: 22px;
    position: absolute;
    top: 60%;
    left: 0;
    transform-origin: 50% 50%;
    transform: translateZ(400px);
    /* here */
    text-align: center;
    font-size: 22px;
}
.perspective {
    width: 200px;
    height: 200px;
    perspective: 800px;
    transform-style: preserve-3d;
}

<div class="perspective">
    <div class="text1">Text</div>
    <div class="text1a">Text</div>
    <div class="text2">Text</div>
</div>

目前我能想到的唯一解决方法是通过 JS 检查样式表并用 transform: scale

覆盖 translateZ

var styles = document.styleSheets;

//patterns
var perspPat = /perspective\s*?:\s*?(\d+)/;
var transZPat = /translateZ\(\s*?(\d+)/;

var perspective;
var translateZ = [];
[].slice.call(styles).forEach(function (x) {
    [].slice.call(x.rules).forEach(function (rule) {
        if (perspPat.test(rule.cssText)) {
            perspective = perspPat.exec(rule.cssText)[1]
        };
        if (transZPat.test(rule.cssText)) {
            translateZ.push([
            rule.selectorText,
            transZPat.exec(rule.cssText)[1]]);
        }


    });

})


translateZ.forEach(function (x) {
    document.querySelector(x[0]).style.transform = 'scale(' + perspective / x[1] + ')';

})

fiddle

如您所见，即使它确实有效，也需要进行大量优化.. （我不认为它在当前状态下可以生产）。

CSS translateZ( ) 与 scale( ) 中的错误渲染

CSS bad rendering in translateZ( ) vs scale( )

css

antialiasing

css-transforms