トランスフォームアニメーションのぼかしを削除しますか？

Question

2016年中頃、トランスフォームアニメーションのぼやけを取り除くための適切な回避策がありますか？

は、私は内部のテキストといくつかのdiv要素を持っていると私はそれをアニメーション化すると想定します

div:hover { 
    transform: rotate(90deg); 
    transition: 1s transform; 
} 

正直なところ、私はオンライン何かを見つけることができませんでしたすべてのソリューションを試してみました。ソリューションのほとんどは数年前です。

私は実際に物事をかなりきれいにしようとしたことの一つは、狂ったようにフォントをスケールアップし、それを元のサイズに戻すために変換スケーリングを使用しています。今、アニメーションを実行するときにブラウザがテキストをラスタライズすると、高品質のイメージが表示されます。

ハッキーではない方がいいですか？

明確な質問：オブジェクトがぼやけることなくオブジェクトのアニメーションをクリアにするにはどうすればよいですか？ブラウザが行っている最適化を無効にする方法が必要です。

私は現在、chrome/webkitブラウザを使用してこれを体験しています。

Answer 1

これは非常によくある質問です。ぼやけは、ハードウェアアクセラレーションを使用していないときにChromeがコンテンツをレンダリングする方法によって発生します。

はないぼやけもはや要素を作るこのため一般的に使用されるsoluton（ハック、いわば）、アクセラレーションを使用するWebKitのを強制 、あります。

はこちらをご覧ください： I've updated your jsFiddle

あなたはtranslateZまたはtranslate3dプロパティを使用したいので、同様の移行を、実行するときに、：

.one:hover { 
    transform: rotate(90deg) translate3d(0,0,0); 
    transition: 1s all; 
} 
.two:hover{ 
    transform: rotate(90deg) translateZ(0); 
    transition: 1s all; 
} 
.three:hover{ 
    transform: rotate(90deg); 
    transition: 1s all; 
}