CSS3转换 - 旋转和字体消失

Question

我在html元素上使用这个简单的css3转换规则（包含许多其他元素，如h1，h2，input和img）：

    div{ 
  -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 

 }

问题是字体很难看，因为你可以看到这是怎么回事？

检查img：

使用rotate css3时，是否有任何方法/技巧可以将字体修改为不滑或变坏？

NB ：避免评论“对我来说看起来不错”：D请深入检查单词的字符是否垂直对齐，请检查单词 Quale l 和 e 字符

Chrome中的

我没有问题，只有Firefox似乎在旋转时出现字体问题：（

  

正如我所看到的那样，只有大字体字体才有效，我的意思是，   font-size：30px及更多，如果我在30px以下，字体不正常。

Answer 1

我两天前读过，不同的Chrome浏览器可能会使用和不使用-webkit-来呈现不同的CSS3轮换。

<强>更新

我在Chrome中也有这个问题。渲染输出是清晰且不对齐的（如图中所示）。所以我只是尝试应用（在Chrome中）-webkit-filter: opacity(0.999);或-webkit-filter: blur(0px);并且它的字体不那么脆，它很好地渲染和对齐，但在两种情况下都有点模糊。奇怪。我认为这适用于任何过滤器。

对于Firefox，-moz-filter不起作用，因此我发现此解决方案与Chrome中的-webkit-filter结果相同：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

values中的Numers是矩阵

1 0 0 0 0 
0 1 0 0 0
0 0 1 0 0 
0 0 0 1 0

这是旋转后和使用过滤器后FF中的屏幕截图。

全屏：http://i.imgur.com/tUAd1B2.jpg

这里是LIVE EXAMPLE（适用于Chrome和FF）

Answer 2

它可能会根据您的互联网浏览器而改变。根据我的经验，Firefox处理旋转效果最佳。 Chrome搞砸了文本，IE有很多错误。

您可以尝试使用Javascript旋转，但这比CSS转换稍微复杂一点。 https://code.google.com/p/jquery-rotate/

Answer 3

:-)我明白了，你是对的。好吧，我想说，这只是一个渲染问题。我想从3种不同的浏览器中你可以获得4种不同的输出（就像通常的变换一样）。 ; - ）

只有有时有效的解决方案是强制3D模式：

input{ transform:rotate(-3deg), translate3d(0, 0, 0); }

但也许它在这里什么也没做。

Answer 4

您是否尝试为输入创建父div并旋转而不是旋转输入？