Question

我正在构建一个包含旋转（transform:rotate(10deg)）的包装器div的网站。 div内的文本也会旋转。我希望文本笔直，所以我将其向后旋转（transform:rotate(-10deg)）。文字再次笔直，但这会导致Chrome中的文字模糊（最新版本，mac）。我试过了：

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased; (and other)
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(0deg);

它没有解决问题..

JSFiddle：http://jsfiddle.net/D69d4/10/

奇怪的是：它在jsfiddle中完美运行..但不是在实际的网站上。当我在我的风格中添加-webkit-backface-visibility: hidden;时，Safari中的模糊文本再次变得清晰，但在Chrome中没有区别。（我几乎认为它在Chrome中让它变得更糟）（FF工作正常）

我希望有人可以帮我解决这个问题，或者解释一下出了什么问题。

Answer 1

它发生在Chromekit和Safari等Webkit浏览器中。尝试添加：

-webkit-transform-origin: 50%  51%;

你会没事的。

Answer 2

尝试添加并检查这是否有效（作为黑客）：

transform: translateZ(0);

Answer 3

这对我有用。

zoom: 1.005;

希望这对您也有帮助。

这将使您的内容有点大，但模糊问题将得到解决。希望这对您有所帮助。

Answer 4

对于仍然遇到此问题的任何人，尽管已尝试过以前的建议：

我发现如果你在旋转的父元素上放置一个perspective属性，它就完全解决了这个问题。假设您没有使用任何三维变换，则该值可以高于0。

示例CSS：

.parent {
    transform: rotate(10deg);
    perspective: 100px;
}

.child {
    transform: rotate(-10deg);
}

Answer 5

如果你的旋转点落在像素之间，可能会发生这种情况。为避免这种情况，您可以尝试稍微移动原点或确保旋转的元素具有奇数尺寸。

Answer 6

在这些答案中没有任何对我有用。进行命中和试验，删除 bottom: 30% 元素上的 position: fixed 并将其替换为 top: 60% 就成功了。试试看。

Answer 7

我使用了transform:rotateY(180deg)，但文字模糊。我将其替换为transform: scale(-1, 1)，它对我有用。

Answer 8

在尝试使用 transform rotateY 旋转卡片时也遇到了文字模糊的问题。

发现这个有用的修复： Rasterization and will-change: transform

只需在您希望使用 transform 设置动画的元素上使用带有 transform 值的 will-change css 属性。

will-change: transform;

这是我更新的 css 代码：

.scene {
    perspective: 1600px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.card__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.card__face--front {

}

.card__face--back {
    background-color: white;
    transform: rotateY( 180deg );
}

.card.is-flipped {
    transform: rotateY(180deg);
}

变换模糊文字：在Chrome中旋转

8 个答案: