使用旋转webkit时出现锯齿状文本问题

Question

关于如何使文字显示为"内联"的任何想法？

我在我的投资组合上制作了宝丽来照片效果,旋转完全破坏了字体,不确定是否有修复.

请放心,我当前的字体并没有那么糟糕,但其他字体看起来很糟糕.

码:

figure.polaroid {
width: 221px;
height: 240px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
background-color: white;
padding: 10px;
box-shadow: 1px 2px 10px black;
margin-top: 25px;
border-radius: 5px;
}

Answer 1

让我猜一下,Chrome？

尝试 -webkit-backface-visibility: hidden;

我已经读过有些人通过应用3d变换进行旋转来避免这个问题,例如transform: rotate3d(1, 2.0, 3.0, 10deg),这可能是一个更清洁的解决方案.