在父元素上使用转换时的Chrome文本呈现

Question

我对div元素进行了非常简单的转换。里面是几行文字。文字在Firefox和IE上渲染得很好，但在Chrome中看起来并不好看。我尝试更改-webkit-font-smoothing，但这也无济于事。

.text-holder{position: absolute;top: 0;width: 30rem;height: 20rem;margin-right:   auto;margin-left: auto;left: 0;right: 0;-webkit-transform:rotate(-4.6deg);-moz-   transform:rotate(-4.6deg); transform: rotate(-4.6deg);}

这是小提琴： http://jsfiddle.net/FFA6b/

Answer 1

很难解释原因，但添加视角解决了这个问题：

-webkit-transform: perspective(999px) rotate(-4.6deg);

<强> fiddle