translate3dと翻訳パフォーマンス
私たちは皆、特に そのニースの記事 から、位置をアニメーション化するためにcss-transformsを好むべきであることを知っています。
しかし、translate()とtranslate3d()...から選択できました。
どちらが一般的に速いですか？
以下のこのサイトは、translate()、translate3d()、および他のいくつかのプロパティを比較するテストを実行します。それによると、translate3d()はほとんどのブラウザで高速です。
Translate3dを使用すると、CSSアニメーションがハードウェアアクセラレーションにプッシュされます。基本的な2D変換を実行する場合でも、translate3dを使用するとより強力になります。 'T3d'は、CSSアニメーションにアニメーションを3Dパワーでプッシュするように指示するため、まさに優れています！それがより速い理由です。 （キャメロンリトルの答えは証拠です）
キャメロンが示唆したようにtranslate3dは多くのブラウザで高速になります。ほとんどのブラウザはgfxハードウェアアクセラレーションを使用してレンダリングを高速化します。特にWebkit _translate3dは、ページアイテムでハードウェアアクセラレーションを強制するための推奨される方法でした。
ただし、実際には3Dトランスフォームの使用には1つの欠点があります-特定のブラウザーバージョン/ OSの組み合わせ（osx + safariを使用している場合）では、ハードウェアアクセラレーションレンダリングがフォントスムージングと補間をわずかに変更するため、ちらつきやぼかします。これらの状況はほとんど回避できますが、留意する必要があります。