-webkit-transformとは何ですか：translate3d（0,0,0）; 正確に？体に適用しますか？

-webkit-transform: translate3d(0,0,0); 正確には何をしますか？パフォーマンスの問題はありますか？私はそれを体または個々の要素に適用する必要がありますか？スクロールイベントが大幅に改善されるようです。

レッスンありがとうございます！

-webkit-transform: translate3d(0,0,0); 一部のデバイスにハードウェアアクセラレーションを実行させます。

良い読み物はここにあります

ネイティブアプリケーションは、デバイスのグラフィックプロセッシングユニット（GPU）にアクセスして、ピクセルを飛ばすことができます。一方、Webアプリケーションはブラウザーのコンテキストで実行されるため、ソフトウェアがレンダリングのほとんど（すべてではないにしても）を実行できるため、遷移の処理能力が低下します。しかし、Webは追いついてきており、ほとんどのブラウザーベンダーは、特定のCSSルールを使用してグラフィカルなハードウェアアクセラレーションを提供しています。

を使用-webkit-transform: translate3d(0,0,0);すると、CSSトランジションに対してGPUが動作し、スムーズになります（FPSが高くなります）。

注： translate3d(0,0,0)表示内容に関しては何もしません。オブジェクトをx、y、z軸で0px移動します。これは、ハードウェアアクセラレーションを強制するためのテクニックにすぎません。

別の方法は-webkit-transform: translateZ(0)です。変換にChromeとSafariでちらつきがある場合と、してみてください-webkit-backface-visibility: hiddenと-webkit-perspective: 1000。詳細については、この記事を参照してください。

これを説明する答えはここにはありませんでした。div複雑な検証セットを使用して、とそのオプションのそれぞれを計算することにより、多くの変換を行うことができます。ただし、3D関数を使用する場合、使用している各2D要素は3D要素と見なされ、これらの要素に対してその場で行列変換を実行できます。ただし、ほとんどの要素はすべてGPUを使用しているため、「技術的に」すでにハードウェアアクセラレーションされています。ただし、3D変換は、これらの2Dレンダリングのそれぞれのキャッシュバージョン（またはのキャッシュバージョンdiv）で直接機能し、それらでマトリックス変換（ベクトル化および並列化されたFP数学）を直接使用します。

3D変換は、キャッシュされた2D divのフィーチャにのみ変更を加えることに注意することが重要です（つまり、divはすでにレンダリングされた画像です）。そのため、境界線の幅や色を変更するなどのことは、漠然と言えば「3D」ではなくなりました。考えてみれば、境界線の幅を変更するには、div理由を再レンダリングして、3D変換を適用できるように再キャッシュする必要があります。

これが理にかなっていることを願って、他に質問があれば私に知らせてください。

translate3d: 0x 0y 0zの頂点をdivGPUシェーダーに実行することによって形成されるテクスチャに対して変換が直接機能するため、質問に答えるには何もしません。このシェーダーリソースはキャッシュされ、フレームバッファーに描画するときにマトリックスが適用されます。したがって、基本的にそれを行うことによるメリットはありません。

これは、ブラウザが内部でどのように機能するかです。

ステップ1：入力を解析する

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

ステップ2：複合レイヤーを開発する

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

ステップ3：コンポジットレイヤーをレンダリングする

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

MobileSafary（iOS 5）のスクロールにはバグがあり、スクロールコンテナ内の入力要素のコピーとしてアーティファクトが表示されます。

子要素ごとにtranslate3dを使用すると、その奇妙なバグを修正できます。これが私のために一日を救ったCSSの例です。

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3Dはハードウェアアクセラレーションを強制します。CSSアニメーション、変換、遷移は自動的にGPUアクセラレーションされませんが、代わりにブラウザの低速のソフトウェアレンダリングエンジンから実行されます。GPUを使用するには、translate3dを使用します。

現在、Chrome、FireFox、Safari、IE9 +、最新バージョンのOperaなどのブラウザにはすべてハードウェアアクセラレーションが付属しており、DOM要素がその恩恵を受けることが示されている場合にのみ使用します。

それが作成されることに注意してくださいスタッキングコンテキスト、それはので、（プラス何他の回答が言ったの）ん潜在的にあなたが見るものに影響を与え、それが想定されていないときに何かがオーバーレイ上で見せることなど、。