CSS3Dの基本 | クロジカ

See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

CSSだけで3D空間を作れます。

「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認できます。

CSSの3D表現に必要なプロパティ

perspective: 1000px;

サンプルではbodyタグにかけています。

これ単体では何も表示に影響ありませんが、後述するtransformで3D的な奥行きを指定するためのプロパティです。

個人的には「3Dの中心点からカメラを引く距離」のプロパティと考えています。100pxなどあまり値が小さいと広角レンズのように歪んでいるようにも見えますが、動きがダイナミックに見えるので見せ方次第です。

transform-style: preserve-3d;

サンプルでは大枠の.contentにかけています。

これもまた単体では表示に影響ありませんが、「この要素を3D要素にするぞ！」というスイッチです。3Dにしたいものはとりあえず宣言が必要なおまじないだと考えてください。

transform: rotateY(90deg);

サンプルでは水色のZ軸を表す.zと土台を見せるための.groundにかけています。
またアニメーションにも利用しています。

3D専用というわけでないですが、rotateZやtranslateZといったZ軸の回転や移動を指定することで必然的に3D表現になります。

3D表現のキモはこのZ軸を意識した操作です。

水色のZ軸の.zには下記のように軸を90度回転させるだけの transform をかけています。

transform: rotateY(90deg);

「rotateZじゃなくてrotateYじゃないか」と思うかもしれませんが、縦軸を基準に90度回転させると2Dだったものが3Dに飛び出してくるわけです。

ただしWeb上の要素は全て1ピクセルも厚みを持たない平面なので、平面が真横になったら何も見えなくなります。上記サンプルのY軸も回転位置によって見えなくなります。3D表現を効果的に見せるには上記サンプルのようにステージ（.stage）全体を傾けたりアニメーションを付けて見せることになります。

このtransformでレイヤーを操作して面を作り、さまざまな形や動きを付けることでCSS3Dを表現することができます。