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

3D と CSS

Paul Kinlan

はじめに

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

一般に、3D は主にゲームのデバイスや高度なユーザーインターフェースとして使用されます。WPF と Silverlight に Perspective 変換が導入されて初めて、ユーザーインターフェース要素に 3D 効果を適用するのに適したモデルが、アプリケーションデベロッパーにとって実用的なソリューションになりました（3D は必ずしも簡単ではありません）。

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

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

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

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

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

-Webkit の視点

対応ブラウザ

ソース

-webkit-transform-3d

対応ブラウザ

ソース

重要な情報として、ブラウザが 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 要素に適用できるクールな効果の一部を簡単に紹介しました。このチュートリアルでは説明していない、できることはまだまだたくさんあります。