der Grund, der Text verwischt, wenn Sie mit translateZ(400px) Transformation sind, ist, dass Dies ist eine 3D-Transformation; Der Browser behandelt das Element als Texturen anstelle von Vektoren, um eine Hardware-3D-Beschleunigung bereitzustellen.
Im Grunde wird die Auflösung bei zunehmender Größe niedriger sein.
Auf der anderen Seite Transformation mit Skala ist eine 2D-Transformation, der Browser das Element als Vektor behandelt und Unschärfe nicht auftritt.
zu sehen, was so schnell zu scale geschieht, wenn wir mit 3D-Kick in, ohne tatsächlich alle translateZ Wert einstellen:
.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>
die einzige Abhilfe Ich kann im Moment daran denken, überprüft das Stylesheet durch JS und überschreiben translateZ mit 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
Wie Sie sehen können, auch wenn es funktioniert, ist eine Menge Optimierung benötigt .. (ich es die Produktion nicht in Betracht ziehen würde bereit, in seinem gegenwärtigen Zustand).
Vielleicht möchten Sie dies überprüfen: http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform. Es scheint keine perfekte Lösung zu geben, aber das Umschalten der Schriftgröße und Skalierungseigenschaften kann helfen. – staypuftman
@staypuftman, diese Art von macht die "Leinwand", wo Zeichnung der Schrift größer, daher können Sie es auch größer anzeigen, aber löst nicht das Problem für "jede Transform Maßnahme" – Vandervals