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

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

零下一度

リリース： 2017-04-22 13:10:29

オリジナル

2305 人が閲覧しました

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 を学習する必要がある学生は、php 中国語 Web サイト

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

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