提高CSS3文本旋转质量

Question

我使用CSS3创建了一系列圆角标签。但是，当我旋转这些标签时，文本的质量（在Windows Chrome中）很差，而且在过渡期间还会“变暗/模糊”。有没有其他选择？我是否正确应用了我的CSS？我最好旋转这些标签并保持文本水平吗？ http://jsfiddle.net/jeepstone/9eGt3/

- Jeepstone

---

是啊，那看起来相当可怕。就我个人而言，我会放弃整个“歪曲”的设计。你可以使用JavaScript来执行上下动画，而不会干扰边框和文本。 - Wesley Murch

如果你的目标是让它看起来像学校作品，年轻和幼稚，那么这样做很好。但是，如果你想要让它显得严肃一些，我建议也放弃这种歪斜的风格。 - Laurence Burke

@LaurenceBurke：我认为这应该是看起来有点傻/好玩/愚蠢，而不是“严肃”的，因此有了各种不同的颜色。顺便说一句 - 我喜欢你的头像。我现在就在盒子里放着MM2。 - Wesley Murch

感谢所有的评论。这个设计是针对儿童的，这更多是概念验证，因为我知道浏览器支持这方面的情况并不一致。 - Jeepstone

Answer 1

Chrome

默认情况下，Chrome不启用反锯齿。但是您可以为元素添加以下CSS属性以启用它：

transform: translate3d(0,0,0);

这将强制浏览器使用其硬件加速来计算变换，这将额外添加一些抗锯齿效果。

通过将-webkit-backface-visibity设置为hidden也可以实现相同的效果：

-webkit-backface-visibility: hidden;

这是你更新后的jsfiddle（在Chrome中测试通过）

http://jsfiddle.net/9eGt3/6/

Firefox

Firefox默认启用抗锯齿功能，因此无需使用transform3d hack，但各浏览器版本的抗锯齿算法质量有所不同。以下是一些比较图像：

分别是Firefox 5，Firefox 9和Chrome。

在这种情况下，最好调整您的字体以使其更适合反锯齿算法。在这种情况下，选择更粗和更大的字体可能会有所帮助。

- Cesar Canassa

---

+1 在Chrome中看起来很棒，不幸的是FF仍然存在问题（不支持translate3d或者支持不佳？）。 - Wesley Murch

这是目前一个不错的解决方案。FF在其他方面存在问题，但我将分开考虑它们。 - Jeepstone

@Jeepstone 我改进了我的答案，以便包括Firefox。 - Cesar Canassa

请注意，在最新版本的Chrome中，您需要将translate3d（0,0,0）应用于每个“translate”实例，而不是全局应用，以获得相同的效果。 - Will Shaver

我也用translate 3d修复了这个问题。但是另一个问题出现了：请看这里：http://www.skroutz.gr/blog，在左侧边栏中，旋转的按钮保持不变。有任何想法为什么会发生这种情况吗？ - a.litis

@a.litis您正在将固定位置和translate混合使用。Translate 3d会创建一个新的坐标系，这会影响到固定位置的坐标。可以尝试的解决方法是在我们的固定元素（导航栏）中插入translateZ（0）。 - Cesar Canassa

Answer 2

正如我提到的那样，使用JavaScript可能会使过渡更加平稳，而不会破坏文本或边框。用此替换CSS转换似乎有很大帮助。这是使用jQuery - 当然使用您选择的工具：

// <li> needs position:relative; in the CSS
$('li').hover(
    function(){
        $(this).stop().animate({'top':'-10px'});
    },function(){
        $(this).stop().animate({'top':'0'});
    }
);

http://jsfiddle.net/9eGt3/5/

很遗憾，我没有经常使用CSS3的机会，所以这不是我的专业领域 - 但不幸的是，我不得不删除现有的CSS悬停转换才能让它正常工作。您可以使用JavaScript检测技术回退到CSS转换，例如通过在body标记中添加 class =“js-enabled”（当然与js一起使用）并在CSS选择器中使用它。

除此之外，我认为您没有其他选择，除非您想使用图像（呸），或者再等几年，直到浏览器对此处理得更好些（呃）。不要将此视为圣经，可能会有人为您提供解决方案 - 但我至少想提供一个解决方法。

- Wesley Murch