我使用-webkit-transform：rotate()旋转元素和在Chrome 14.0.835.2 dev-m它做一些很奇怪的东西在元素内的文本。它提醒我一个类似的效果，你在Photoshop中，当你使用“平滑”反锯齿而不是“清晰”旋转文本时得到的效果。
任何人都知道这里发生了什么？它是特定于这个webkit或Chrome版本或有我可以做的来解决它吗？ (它也不是反列表元素之间的边界)
这里是CSS：
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial,20% 10%,50% 10%,500,from(rgba(255,250,220,1)),to(rgba(255,238,253,0)));
Box-shadow: 1px 1px 0 #ddccaa,2px 2px 0 #dbcaa8,3px 3px 0 #d9c8a6,4px 4px 0 #d7c6a4,5px 5px 0 #d5c4a2,6px 6px 1px #d3c2a0,4px 4px 2px rgba(90,70,50,.5),8px 8px 3px rgba(90,.3),12px 12px 5px rgba(90,.1);
}
解决方法
尝试使用webkit触发CSS 3d变换模式。这改变了chrome呈现的方式
-webkit-transform: rotate(.7deg) translate3d( 0,0);
编辑
还有一个Webkit只有样式声明-webkit-font-smoothing，它接受值
> none
>子像素抗锯齿
>抗锯齿
其中子像素抗锯齿是默认值。
唉，子像素抗锯齿对旋转文本没有好的解决方案。渲染机不能处理。 3d变换切换到刚刚抗锯齿。但我们可以尝试直接设置它。
