提高css3文本旋转质量

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

---

正如我提到的，使用javascript可能会使转换更加平滑，而不会破坏文本或边框。用这个替换CSS转换似乎有很大帮助。这是在使用jQuery—当然可以使用您选择的工具：

/
需要位置：相对；在CSS中
$（'li'）。悬停(
函数（）{
$（this.stop（）.animate（{'top'：'-10px'}）；
}，函数（）{
$（this.stop（）.animate（{'top'：'0'）；
}
);

我不太幸运，不能经常使用CSS3，所以这对我来说不是一个专业领域——但不幸的是，我不得不删除现有的CSS悬停转换以使其正常工作。您可以使用javascript检测技术退回到CSS转换，比如将

class=“js enabled”

添加到body标记（当然是js）并在CSS选择器中使用它

除此之外，我认为你已经没气了，除非你想使用图像（bah），或者再等几年，直到浏览器能更好地处理这些东西（grr）。不要把这当作福音，也许有人会给你一个解决方案——但我想我至少应该提供一个解决方案。

Chrome 默认情况下，Chrome不启用抗锯齿。但您可以将此CSS属性添加到元素中以启用它：

transform: translate3d(0,0,0);

这将迫使浏览器使用其硬件加速来计算变换，这将增加一些抗锯齿功能

通过将

-webkit backface visibity

设置为

hidden

，也可以应用相同的效果：

-webkit-backface-visibility: hidden;

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

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

分别是Firefox5、Firefox9和Chrome

---

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

是的，伙计，这看起来很可怕。就我个人而言，我会放弃整个“扭曲”的设计。你可以使用javascript来制作上/下动画，而不会干扰边框和文本。如果你的目标是让它看起来像学校、年轻、古美，那就太好了，但是如果你想让它变得严肃，那么我也会放弃弯曲。@LaurenceBurke:我想这应该看起来愚蠢/有趣/愚蠢，而不是“严肃”，因此，所有不同的颜色。爱你的化身。我的盒子里还有MM2，谢谢你的评论。该设计是针对儿童的，这更能证明概念，因为我知道这方面的浏览器支持最好是混合的。+1在Chrome中对我来说也很好，不幸的是FF仍然受到影响（不支持

translate3d

或者只是支持差？）。目前这是一个很好的解决方案。FF在其他方面受到影响，但我将分别讨论。@Jeepstone为了加入Firefox，我改进了我的答案。请注意，在最新版本的chrome中，您需要将translate3d（0,0,0）应用于“translate”的每个实例，而不是全局，以获得相同的效果。@a.litis您将固定位置与translate混合在一起。“平移三维”将创建一个新的坐标系，该坐标系将与固定位置坐标相混淆。您可以尝试的一种解决方法是在固定元素（导航栏）中插入translateZ（0）