提高 css3 文本旋转质量答案

【问题标题】：Improve css3 text rotation quality提高 css3 文本旋转质量
【发布时间】：2012-01-26 04:08:17
【问题描述】：

我使用 CSS3 创建了一系列圆形标签。然后我旋转了这些选项卡，但文本的质量（Windows - Chrome）很差，并且在转换时也“变暗/模糊”。有哪些替代方案？我是否正确应用了我的 CSS？我会更好地旋转标签并保持文本水平吗？

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

【问题讨论】：

是的，那是一些看起来很可怕的东西。就个人而言，我会放弃整个“弯曲”的设计。您也许可以使用 javascript 来制作上/下动画，而不会影响边框和文本。
如果你的目标是让它看起来像学校、年轻和愚蠢，那就太好了，但如果你想让它变得严肃，那么我也会放弃歪曲。
@LaurenceBurke：我认为这应该看起来很愚蠢/有趣/愚蠢，而不是“严肃”，因此所有不同的颜色。 OT - 爱你的头像。我这里的盒子里还有 MM2。
感谢所有 cmets。该设计是针对儿童的，这更能证明概念，因为我很欣赏浏览器支持的这一领域充其量是混合的。

标签： css rotation transform

【解决方案1】：

铬

Chrome 默认不启用抗锯齿功能。但是您可以将此 CSS 属性添加到您的元素中以启用它：

transform: translate3d(0,0,0);

这将强制浏览器使用其硬件加速来计算转换，这将添加一些抗锯齿作为奖励。

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

-webkit-backface-visibility: hidden;

这是您更新的 jsfiddle（在 Chrome 中测试）

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

火狐

Firefox 默认启用抗锯齿功能，因此不需要 transform3d hack，但抗锯齿算法的质量因浏览器版本而异。以下是一些对比图：

分别是 Firefox 5、Firefox 9 和 Chrome。

你最好的办法是调整你的字体，使它对抗锯齿算法更友好。在这种情况下，选择更粗更大的字体可能会有所帮助。

【讨论】：

+1 在 Chrome 中看起来对我来说也很棒，不幸的是 FF 仍然受到影响（不支持 translate3d 或者只是支持不佳？）。
目前这是一个很好的解决方案。 FF 在其他方面受苦，但我会分别看。
@Jeepstone 我改进了答案以包含 Firefox
请注意，在最新版本的 chrome 中，您需要将 translate3d(0,0,0) 应用于“翻译”的每个实例，而不是全局应用以获得相同的效果。跨度>
@a.litis 您正在将固定位置与平移混合。 translate 3d 创建了一个与固定位置坐标相混淆的新坐标系。您可以尝试的解决方法是在我们的固定元素（导航栏）中插入 translateZ(0)

【解决方案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 转换，例如将 class="js-enabled" 添加到 body 标记（当然使用 js）并在您的 CSS 选择器中使用它。

除此之外，我认为除非您想使用图像（呸）或再等几年，直到浏览器可以更好地处理这些东西（grr），否则您已经没油了。不要将此视为福音，有人可能会为您提供解决方案 - 但我想我至少会提供一种解决方法。

【讨论】：