CSS を使用してデスクトップとモバイルでハードウェア アクセラレーションのサンプル コードを有効にする

CSS を使用してブラウザでハードウェア アクセラレーションを有効にし、GPU (グラフィックス プロセッシング ユニット) が機能できるようにすることでパフォーマンスを向上できることをご存知ですか?

現在、ほとんどのコンピューター グラフィックス カードはハードウェア アクセラレーションをサポートしています。このことを考慮すると、GPU のパワーを利用して、Web サイトやアプリケーションをよりスムーズに実行できます。

デスクトップとモバイルで CSS によるハードウェア アクセラレーションを有効にする

CSS アニメーション、変換、トランジションは GPU アクセラレーションを自動的に有効にしませんが、ブラウザーの遅いソフトウェア レンダリング エンジンによって実行されます。では、どうすれば GPU モードに切り替えることができるのでしょうか? 多くのブラウザは、特定のトリガーによる CSS ルールを提供しています。

現在、Chrome、FireFox、Safari、IE9+、および Opera の最新バージョンはすべて、ページ内の DOM 要素に特定の CSS ルールが適用されていることを検出すると、それをオンにします。要素は 3D 変換です。

例:

.cube
 {
   -webkit-transform:
 translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5,0.5,0.5);
}

しかし、場合によっては、要素に 3D 変形効果を適用する必要がない場合、どうすればよいでしょうか?現時点では、ちょっとしたトリックを使用してブラウザを「騙して」ハードウェア アクセラレーションを有効にすることができます。

要素に 3D 変換を適用したくない場合でも、3D エンジンをオンにすることができます。たとえば、transform:translateZ(0); を使用してハードウェア アクセラレーションを有効にすることができます。

.cube
 {
   -webkit-transform:
 translateZ(0);
   -moz-transform:
 translateZ(0);
   -ms-transform:
 translateZ(0);
   -o-transform:
 translateZ(0);
   transform:
 translateZ(0);
   /*
 Other transform properties here */

}

Chrome と Safari で CSS 変換またはアニメーションを使用すると、ページがちらつく場合があります。次のコードでこの状況を修正できます:

.cube
 {
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   backface-visibility:hidden;
 
   -webkit-perspective:1000;
   -moz-perspective:1000;
   -ms-perspective:1000;
   perspective:1000;
   /*
 Other transform properties here */
}

Webkit カーネルを備えたブラウザでは、別の行が最も効果的な方法です。

CSS ビデオ チュートリアル に注目してください。多くの CSS オンライン ビデオ チュートリアルを無料で視聴できます。

以上がCSS を使用してデスクトップとモバイルでハードウェア アクセラレーションのサンプル コードを有効にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。