IE10 の CSS3 3D Transforms

CSS3 の機能は、よりリッチで没入的な Web エクスペリエンスの構築に役立ちます。最近の記事では、CSS3 の Transitions と Animations を使ってより個性的なサイトを実現する方法についてご紹介しました。CSS3 3D Transforms (英語) は、文字どおり、サイト開発に新たな次元を加えるものです。たとえば、Metro スタイルを採用している Windows 8 [スタート] 画面では、3D Transforms の微妙な効果を使って、タイルを押し込んだ際の視覚的な変化を実現しています。

Internet Explorer 10 タイルが押し込まれる前の状態 (左) と押し込んだ状態 (右)

CSS Transforms に第 3 の次元を加える

CSS3 2D Transforms と同様に、3D Transforms は、HTML 要素に幾何学的な変形処理を適用する CSS のプロパティである transform と transform-origin 向けに関数と値を提供します。CSS3 3D Transforms では、変形関数を拡張して、3 次元的な変形を可能にします。たとえば rotate()、 scale()、translate()、skew()、matrix() の各関数は、3 次元空間に対応するため Z 座標を表すパラメーター (matrix3d() については 10 種類のパラメーター) が追加されているほか、rotateZ() や scaleZ() などの変形関数が派生しています。

また、新たに追加された変形関数 perspective では、遠くにあるポイントを小さく表示することによって、変形要素に奥行を与えます。

CSS3 3D Transforms では、新しい CSS プロパティもいくつか追加されています。transform プロパティと transform-origin プロパティのほか、IE10 ではベンダー プレフィックス付きで perspective、perspective-origin、backface-visibility、および flat の値を取る transform-style をサポートします。

注: この記事のマークアップ例では、いずれも W3C の仕様に従い、プレフィックスを使っていません。ただし、現時点でこれらの機能を実装しているブラウザーでは、すべてベンダー固有プレフィックスが必要です。実際に試してみる際は、マークアップ例に該当ブラウザーのプレフィックスを追加してください。

Perspective

3D Transforms における重要な変形関数として、perspective があります。この関数では、閲覧者の視点を決めて、視野に入るコンテンツをピラミッド状にマッピングし、それを 2 次元の観測面に投影します。Perspective を指定しなかった場合、Z 空間の点が同じ 2 次元平面にマッピングされるため、結果として得られる変形効果には奥行が生じません。下に示す Z 軸に沿ったトランスレーションなど、一部の変形処理では、perspective 変形関数がなければ変形効果が視覚的に確認できません。

以下の例では、 が変形前の元の状態の要素で、 は変形後の要素です。

transform: perspective(500px) translate(0px, 0px, -300px);		transform: translate(0px, 0px, -300px);
transform: perspective(500px) rotateY(30deg);		transform: rotateY(30deg);

複数の要素に対して perspective 変形を追加する場合は、親要素の perspective プロパティを使用すると便利です。perspective プロパティを設定すると、子要素にも perspective 変形が適用されます。

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

また、perspective-origin プロパティを perspective と組み合わせて、視点を要素の中心からずらすことも可能です。

下のとおり、perspective-origin を左にずらすと、元の perspective-origin で右側にあったコンテンツが遠くに見えるように表示されます。

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}

backface-visibility

backface-visibility プロパティは、コンテンツの裏面を隠す場合に便利です。既定では裏面は非表示になっておらず、変形させたコンテンツは裏返っても目に見える状態です。一方、backface-visibility を hidden に設定すると、表面が見えない角度まで回転させた要素は不可視になります。この効果は、複数の面を持つ物体のシミュレーションを行う際に便利です。下のトランプ カードはその一例です。backface-visibility を hidden に設定するだけで、簡単に表向きの面しか見えないようにすることができます。

CSS マークアップ:

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

1 枚のカードの HTML マークアップ:

<div class="card"><div></div><div></div></div>

上に示したようなカードを 6 枚作り、それぞれ style="transform: rotateY(ndeg)" プロパティに異なる回転角度 n を指定すると、次のような表示になります。

rotateY(0deg);	rotateY(36deg);	rotateY(72deg);	rotateY(108deg);	rotateY(144deg);	rotateY(180deg);

解説すると、この例では、回転がゼロの場合は 2 つ目の div であるクラブの 8 が表示されています。描画順序で最も上にあるためです。カードに回転を加えていき、90°を超えると、backface-visibility: hidden; プロパティを持つ 2 つ目の div は不可視になり、1 つ目の div であるカードの背面が表示されます。

3D Transforms と Animations、Transitions との組み合わせ

さらに、3D Transforms は CSS Transitions や Animations と組み合わせて使うこともできます。IE10 または CSS3 3D Transforms の CSS3 Animations 対応のその他のブラウザーをお持ちの場合は、こちらのスクロールするテキストの例 (英語) をお試しください。これは transform プロパティのアニメーションによって実現されています。

下のスクリーン ショットに示すような効果を生み出すための CSS マークアップは次のとおりです。

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

今すぐ試す

この機能は、Windows Developer Preview (英語) に搭載の IE10 でお試しいただけます。Test Drive デモ Hands On: 3D Transforms (英語) では CSS 3D Transforms の可能性を視覚化することができます。

皆さんのクリエイティブな使用例を目にするのを楽しみにしています!

- Internet Explorer グラフィックス担当プログラム マネージャー Jennifer Yu