回転するラッパー 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 は正常に動作します)
誰かがこの件について私を助けてくれるか、何が間違っているのか説明してくれることを願っています。
ベストアンサー1
これは、Chrome や Safari などの Webkit ブラウザで発生します。以下を追加してみてください。
-webkit-transform-origin: 50% 51%;
そうすれば大丈夫でしょう。