95

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

レッスンをありがとう！

4

5 に答える 5

121

-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。詳細については、この記事を参照してください。

于 2013-08-30T09:26:54.367 に答える
12

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

3D 変換は、キャッシュされた 2D div の機能のみを変更することに注意してください (つまり、div は既にレンダリングされたイメージです)。ですから、ボーダーの幅や色を変えるようなことは、もはや漠然とした「3D」ではありません。考えてみると、境界線の幅を変更するにはdiv、3D 変換を適用できるように、理由を再レンダリングして再キャッシュする必要があります。

ご不明な点がございましたら、お気軽にお問い合わせください。

あなたの質問に答えるために、変換は GPU シェーダーにtranslate3d: 0x 0y 0z頂点を実行することによって形成されるテクスチャに直接作用するため、何もしません。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);
}
于 2014-02-18T00:58:22.330 に答える
6

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

各子要素にtranslate3dを使用すると、その奇妙なバグを修正できます。これは、私にとって 1 日を節約した CSS の例です。

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

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}
于 2013-09-09T13:47:32.743 に答える
5

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

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

于 2013-08-30T09:29:51.970 に答える
4

スタッキングコンテキスト（および他の回答が言ったこと）を作成することに注意してください。したがって、表示されるものに影響を与える可能性があります。たとえば、想定されていないときにオーバーレイの上に何かを表示するなどです。

于 2017-08-17T23:02:55.297 に答える