このページは Cloud Translation API によって翻訳されました。

3D と CSS
bookmark_border コレクションでコンテンツを整理必要に応じて、コンテンツの保存と分類を行います。

Paul Kinlan

はじめに

長い間、3D はデスクトップアプリケーションの専売特許でした。最近、ネイティブ GPU アクセラレーションにアクセスできる高度なスマートフォンが登場したことで、3D がほぼすべての場所で使用されるようになりました。

通常、3D は主にゲームや高度なユーザーインターフェースのデバイスとして使用されます。ユーザーインターフェース要素に 3D エフェクトを適用するための適切なモデルがアプリケーションデベロッパーにとって実用的なソリューションになったのは、WPF と Silverlight でパースペクティブ変換が導入されてからでした（結局のところ、3D は簡単ではありません）。

CSS 3D 変換モデルは、2009 年 3 月にドラフト仕様として導入されました。これにより、ウェブデベロッパーは、アプリケーション作成者が 3D 遠近変換を任意の視覚 DOM 要素に適用できるようにすることで、3D を活用した魅力的なユーザーインターフェースを作成できるようになりました。

CSS 3D 変換のワーキングドラフトは、CSS 2D 変換モデルの論理的な拡張であり、3D 空間での遠近感、回転、変換などの追加プロパティが導入されています。

これまでにないほど簡単に 3D インターフェースを構築できるようになりました。これらの技術により、参入障壁が低下しました。3D 要素を作成するために数学に精通している必要はありません。

CSS 3D モジュールは、デベロッパーが視覚的に魅力的なリッチなアプリケーションを構築できるように設計されています。没入型の 3D 世界を構築できるように設計されているわけではありません。

ブラウザのサポートとハードウェアアクセラレーション

-webkit-perspective

Browser Support

Source

-webkit-transform-3d

Browser Support

Source

重要な情報として、ブラウザが 3D を「サポート」していても、ハードウェアやドライバの制限により 3D をレンダリングできない場合があります。DOM ベースの 3D シーンは計算コストが非常に高くなる可能性があるため、ブラウザベンダーは、純粋なソフトウェアレンダリングソリューションでブラウザの速度を低下させるのではなく、GPU を活用することにしました。ただし、GPU はすべてのプラットフォームで利用できるとは限りません。

特徴検出

特徴検出はどうなりますか？聞かれないことを願っていたのですが。デベロッパーは、Modernizr などのツールを使用して、特定のブラウザの機能や能力のサポートを検出してきました。3D 変換のサポートの有無は検出できますが、ハードウェアアクセラレーションの有無は検出できません。ハードウェアアクセラレーションは重要な要素です。

基本的なサンプル

すぐに始めるのが一番です。このサンプルでは、任意の DOM 要素の基本的な回転セットを適用します。

まず、ルート要素の視点の定義から始めます。

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

パースペクティブは、3D シーンの奥行きをレンダリングする方法を定義するため重要です。値が 1 ～ 1, 000 の場合、非常に顕著な効果が得られ、1, 000 を超える場合は効果が弱くなります。次に、iframe を追加し、Z 軸と Y 軸を中心に 30 度の回転を適用します。

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

やりました。これで、要素は完全にインタラクティブになり、あらゆる点で完全な DOM 要素になります（見た目がさらにクールになったことを除きます）。ブラウザが 3D 変換に対応していない場合、何も起こりません。回転が適用されていないシンプルな iframe が表示されます。ブラウザが 3D 変換をサポートしていても、ハードウェアアクセラレーションがない場合、変換が少し奇妙に見えることがあります。

アニメーション

CSS3 の 3D 変換の良いところは、CSS 遷移モジュールと非常によく連携することです。アニメーションと遷移は CSS で簡単に定義できます。3D に適用することも例外ではありません。

3D の遠近感を適用した要素をアニメーション化するのは簡単です。「transition」スタイルを「transform」に設定し、持続時間とアニメーション関数を適用するだけです。その後、[transform] スタイルに変更を加えると、アニメーション化されます。

以前の例をリファクタリングし、インラインスタイルではなくドキュメントスタイルを使用するようにしました。これにより、サンプルが明確になるだけでなく、:hover 疑似セレクタを利用できるようになります。:hover セレクタを使用すると、要素にマウスを移動するだけで遷移を開始できます。うまくできました。

概要

ここでは、CSS 3D 変換を使用して表示可能な DOM 要素に適用できるクールな効果の一部を簡単に紹介しました。このチュートリアルでは説明していない、できることはまだまだたくさんあります。

3D と CSS bookmark_borderbookmark コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。