причина, по которой текст размывает когда вы преобразовывая с translateZ(400px) что Это 3D-преобразование; браузер рассматривает элемент как текстуры вместо векторов, чтобы обеспечить аппаратное трехмерное ускорение.
Таким образом, при увеличении размера разрешение будет ниже.
С другой стороны, трансформации с масштабом является 2D преобразование, браузер обрабатывает элемент как вектор и смазывание не происходит.
взглянуть на то, что происходит с scale как только мы пнуть с использованием 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 и переопределяет translateZ с 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] + ')';
})
fiddle
Как вы можете видеть, даже если он делает работу, много оптимизации требуется .. (я не считал бы это производство готово в его нынешнем состоянии).
Можете проверить это: http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform. Похоже, что это не идеальное решение, но может помочь изменение свойств шрифта и масштаба. – staypuftman
@staypuftman, этот вид делает «холст», где рисует шрифт больше, поэтому вы можете отображать его больше, а также, но не решает проблему для «любой меры измерения» – Vandervals