translateZ（）vs scale（）中的CSS错误呈现 [英] CSS bad rendering in translateZ( ) vs scale( )

问题描述

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

I noticed that there is a big quality difference when transforming text in this 2 ways:

.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轴上放置文本时是否有一种方法可以强制更好的渲染？

Is there a way to force a better rendering when displacing text on the Z axis?

推荐答案

the使用 translateZ（400px）进行转换时文本模糊的原因是这是3D转换；浏览器将元素视为纹理而不是向量，以便提供硬件3d加速。

因此，基本上，在增大尺寸时分辨率会降低。

the reason the text blurs when you're transforming with translateZ(400px) is that this is a 3D transformation ; the browser treats the element as textures instead of vectors in order to provide hardware 3d acceleration.
So basically the resolution will be lower when increasing size.

另一方面，按比例缩放是2D变换，
浏览器将元素视为矢量，并且不会发生模糊。

On the other hand transforming with scale is a 2D transformation, the browser treats the element as vector and blurring doesn't occur.

看看在我们使用3d时，缩放会发生什么，而没有实际设置任何 translateZ 值：

take a look at what happens to scale as soon as we kick in with 3d, without actually setting any translateZ value:

.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检查样式表并覆盖 translateZ 使用 transform：scale

the only workaround I can think of at the moment is checking the stylesheet through JS and overriding translateZ with transform: scale

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] + ')';

})

小提琴

您可以看到，即使它确实起作用，也需要进行大量优化..
（我不认为它在当前状态下已经可以生产）。

As you can see, even if it does work, a lot of optimization is needed.. (I wouldn't consider it production ready in it's current state ).

这篇关于translateZ（）vs scale（）中的CSS错误呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！