何が-webkit-transformですか：translate3d（0,0,0）;正確には？身体に適用する？

Question

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

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

Answer 1

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

良い読み出しがHere

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

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

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

---

代替は-webkit-transform: translateZ(0)です。変換のためにChromeとSafariにちらつきがある場合は、-webkit-backface-visibility: hiddenと-webkit-perspective: 1000を試してみてください。詳細はthis articleを参照してください。

Answer 2

Translate3D力ハードウェアアクセラレーション .CSSアニメーション、変換し、トランジションは自動的にではありませんGPUは、加速され、代わりに私たちは現在translate3d

を使用するGPUを使用するには、ブラウザの遅くソフトウェアレンダリングengine.In注文から実行しますChrome、FireFox、Safari、IE9 +、Operaの最新バージョンのようなブラウザはすべて、ハードウェアアクセラレーションが付属していますが、DOM要素が恩恵を受けるという指示がある場合にのみ使用します。

Answer 3

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); 
} 

Answer 4

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

3D変換では、キャッシュされた2D divのフィーチャのみが変更されます（つまり、divは既にレンダリングされたイメージです）。境界線の幅や色を変更するなどのことは、もはや曖昧に言えば「3D」ではありません。考えてみると、境界線の幅を変更すると、divを再レンダリングする必要があります。そのため、再変換して3D変換を適用できます。

ご希望の場合はこれが意味を持ち、ご連絡ください。

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

これはブラウザが内部的に動作する方法です。

ステップ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); 
} 

Answer 5

stacking context（その他の回答に加えて）も作成されるので、はと表示されているものに影響を与える可能性があります。オーバーレイの上に何かを表示させることは、想定されていないときに行います。