我注意到,通过这两种方式转换文本时,质量差异很大：
.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轴上移动文本时,是否有办法强化更好的渲染？
解决方法
当您使用translateZ(400px)进行转换时,文本模糊的原因是这是一个3D转换;浏览器将元素视为纹理而不是向量,以便提供硬件3d加速.
因此,当尺寸增加时,基本上分辨率会降低.
因此,当尺寸增加时,基本上分辨率会降低.
另一方面,随着规模的转变是二维转型,
浏览器将元素视为向量,并且不会发生模糊.
看看一旦我们踢入3d就会发生什么变化,没有实际设置任何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] + ')';
})
正如你所看到的,即使它的工作,需要很多的优化.(我不会认为它的生产在当前状态下准备就绪).
