il motivo per il testo sfuma quando si sta trasformando con translateZ(400px) è che questa è una trasformazione 3D; il browser considera l'elemento come texture anziché vettori per fornire l'accelerazione hardware 3d.
Quindi in pratica la risoluzione sarà inferiore quando si aumentano le dimensioni.
D'altra parte trasformante con scala è una trasformazione 2D, browser considera l'elemento come vettore e sfocatura non si verifica.
un'occhiata a ciò che accade a scale non appena si dà con 3d, senza in realtà impostare alcun translateZ valore:
.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>
l'unica soluzione Posso pensare al momento sta controllando il foglio di stile tramite JS e sovrascrivendo translateZ con 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
Come si può vedere, anche se funziona, è necessario un sacco di ottimizzazione .. (non vorrei considerarlo pronto per la produzione nel suo stato attuale).
Potrebbe voler controllare questo: http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform. Non sembra esserci una soluzione perfetta, ma può essere d'aiuto cambiare la dimensione del carattere e le proprietà della scala. – staypuftman
@staypuftman, questo tipo di rende la "tela" in cui si disegna il carattere più grande, quindi è possibile visualizzarlo più grande, ma non risolve il problema per "qualsiasi misura di trasformazione" – Vandervals