3D と CSS

Paul Kinlan 氏

はじめに

長い間、3D はデスクトップ アプリケーションの保全でした。最近、ネイティブ GPU アクセラレーションに対応した高度なスマートフォンが登場したことで、ほぼあらゆる場所で 3D が使われるようになりました。

一般に、3D は主にゲーム用のデバイスや、一部の高度なユーザー インターフェースとして使用されます。ユーザー インターフェース要素に 3D 効果を適用するための適切なモデルが、アプリケーション開発者にとって実用的なソリューションになったのは、WPF と Silverlight で Perspective 変換が導入されてからでした（結局のところ、3D は簡単には実現できません）。

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

CSS 3D Transformation Working Draft は、CSS 2D Transformation Model を論理的に拡張したものであり、3D 空間における視点、回転、変形といったいくつかの追加プロパティが導入されています。

これまでにないほど簡単に 3D インターフェースを構築できるようになりました。これらのテクノロジーにより、参入障壁が低くなっています。もはや 3D 要素を作るのに数学の達人である必要はもうありません。

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

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

-webkit-perspective

対応ブラウザ

  • 36
  • 12
  • 16
  • 9

ソース

-webkit-transform-3d

対応ブラウザ

  • 2
  • 12
  • 49
  • 4

ソース

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

特徴検出

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

基本サンプル

さっそく本題に入りましょう。このサンプルでは、任意の DOM 要素に基本の回転セットを適用します。

まず、ルート要素に視点を定義します。

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

Perspective は 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 Transition モジュールと非常に美しく結びついていることです。アニメーションと遷移は CSS で簡単に定義でき、3D に適用することも例外ではありません。

3D 視点が適用された要素をアニメーション化することは簡単です。「遷移」スタイルを「transform」に設定し、継続時間とアニメーション関数を追加するだけです。それ以降、「tranform」スタイルへの変更はアニメーション化されます。

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

まとめ

これは、CSS 3D 変換を使用して表示可能な DOM 要素に適用できる優れた効果の一部を簡単に確認しました。このチュートリアルでは説明されていませんが、他にも実施できる操作が多数あります。