1

我在 html 元素上使用了这个简单的 css3 转换规则（其中包含许多其他元素，如 h1、h2、inputs 和 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); 

 }

问题是字体是skretched，你可以看到这怎么可能？

检查图像： 在此处输入图像描述

在使用旋转 css3 时，有什么方法/技巧可以将字体修复为不 skrech 或变得如此糟糕？

注意：为了避免“它看起来不错”之类的评论：D 请仔细检查单词的字符是否垂直对齐，例如检查单词Quale的l和e字符

在 Chrome 中我没有问题，只有 Firefox 似乎在旋转字体时出现问题:(

正如我所看到的，只有当是大尺寸字体时字体才可以，我的意思是，字体大小：30px 及更多，如果我低于 30px，字体就不行。

4

4 回答 4

2

两天前我读到，不同的 Chrome 浏览器可能会使用和不使用-webkit-.

更新：

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

在 Firefox 的情况下，-moz-filter它不起作用，所以我找到了这个解决方案，它给出了与-webkit-filterChrome 相同的结果：

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是矩阵

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

这是现场示例（适用于 Chrome 和 FF）

于 2013-04-05T00:00:55.013 回答
1

它可以根据您的互联网浏览器而改变。以我的经验，Firefox 处理旋转最好。Chrome 会弄乱文本，IE 有很多错误。

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

于 2013-04-04T23:52:10.180 回答
1

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

有时可行的唯一解决方案是强制使用 3d 模式：

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

但也许它在这里什么都不做。

于 2013-04-04T23:53:05.140 回答
0

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

于 2013-04-05T00:00:45.257 回答