web-dev-qa-db-ja.com

transform：rotate in Chrome

回転するラッパーdiv（transform:rotate(10deg)）を使用してWebサイトを構築しています。 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で完全に機能します。しかし、実際のWebサイトでは機能しません。スタイル内に-webkit-backface-visibility: hidden;を追加すると、Safariのぼやけたテキストが再び鮮明になりますが、Chromeでは違いはありません（Chromeでは悪化していると思います） ）（FFは正常に動作します）

誰かがこれを手伝ってくれるか、何が悪いのか説明してくれるといいのですが。

cssgoogle-chrometextrotationtransform
12
Amber

ChromeやSafariなどのWebkitブラウザで発生します。次を追加してみてください：

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

そして、あなたは大丈夫でしょう。

21
user2648599

追加して、これが機能するかどうかを確認してください（ハックとして）：

transform: translateZ(0);
5
KrishnaDhungana

以前の提案を試したにもかかわらず、まだこの問題に直面している人のために：

回転している親要素にperspectiveプロパティを配置すると、問題が完全に修正されることがわかりました。 3D変換を使用していない場合、値は0より上であれば何でもかまいません。

CSSの例：

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

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

これは私のために働いた。

zoom: 1.005;

これがあなたにも役立つことを願っています。

これにより、コンテンツが少し大きくなりますが、ぼかしの問題は解決されます。これがお役に立てば幸いです。

3
weBBer

回転点がピクセル間にある場合に発生する可能性があります。これを回避するには、原点を少し移動するか、回転する要素の寸法が奇数であることを確認します。

1
Kirill Shabunov