web-dev-qa-db-ja.com

-webkit-transformの機能：translate3d（0,0,0）;正確に？体に適用しますか？

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

レッスンをありがとう！

htmlcsscss3webkit
79
WIWIWWIISpitFire

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

良い読み物が見つかりました ここ

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

-webkit-transform: translate3d(0,0,0);を使用すると、GPUがCSSトランジションのアクションにキックされ、CSSトランジションがスムーズになります（FPSが高くなります）。

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

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

103
Yotam Omer

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

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

これが理にかなっていて、さらに質問があれば教えてください。

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

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

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

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);
}
6
Serge Seletskyy

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

現在、Chrome、FireFox、Safari、IE9 +、および最新バージョンのOperaのようなブラウザーはすべてハードウェアアクセラレーションを備えており、DOM要素がそれから利益を得るという指示がある場合にのみ使用します。

5
Prasanna Aarthi

スタッキングコンテキスト （および他の回答が言ったこと）を作成するため、doesは潜在的にあなたが見るもの、例えば想定外のときにオーバーレイの上に何かを表示する。

2
Jason Young