在Chrome中使用webkit-transform旋转时的模糊文字

Question

我使用-webkit-transform: rotate()旋转了一个元素，但问题是这在Google Chrome中无法正常工作。它看起来像Photoshop中的光滑字体。我已经添加了translate3d()但这不起作用。

你能告诉我，如果这是正常行为还是有办法解决这个问题？

.rotate { 
    -webkit-transform: rotate(-3.5deg) translate3d(0, 0, 0); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(-3.5deg); /* Firefox 3.5-15 */ 
    -ms-transform: rotate(-3.5deg); /* IE 9 */ 
    -o-transform: rotate(-3.5deg); /* Opera 10.50-12.00 */ 
    transform: rotate(-3.5deg); /* Firefox 16+, IE 10+, Opera 12.10+ */ 

    -webkit-transform-origin: 0 0;  
    -moz-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0; 
} 

.inverse { 
    -webkit-transform: rotate(3.5deg) translate3d(0, 0, 0); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(3.5deg); /* Firefox 3.5-15 */ 
    -ms-transform: rotate(3.5deg); /* IE 9 */ 
    -o-transform: rotate(3.5deg); /* Opera 10.50-12.00 */ 
    transform: rotate(3.5deg); /* Firefox 16+, IE 10+, Opera 12.10+ */ 

    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0; 
} 

Answer 1

已解决！

问题不在Google Chrome，而是LayerSlider。 与z-index和绝对位置我解决了这个问题。