CSS3

CSSだけで作る3D表現入門

More than 1 year has passed since last update.

JavaScript も Canvas も使わず CCS の transform を主に使って3D表現する方法のメモ。

サンプル

スクリーンショット 2017-10-11 16.40.38.png
Codepenで表示

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

  • perspective
  • transform-style
  • transform

以上3点です。

perspective

perspective: 1000px;

3D表現するオブジェクト全体を俯瞰する親要素へかけます。
サンプルでは body にかけています。

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

個人的には「中心点からカメラを引く距離」と考えています。
100pxなどあまり値が小さいと広角レンズのように歪んでいるように見えます。とりあえず1000pxなど大きめの値を設定し、後から調整しても良いです。

transform-style

transform-style: preserve-3d;

3D化したいオブジェクトの大枠要素へかけます。
サンプルでは .content にかけています。

これは単なるお約束の3D宣言です。
これが無いと perspectivetransform をかけても立体感が付きません。

transform

transform:
  rotateX(*deg)
  rotateY(*deg)
  rotateZ(*deg);

3D化するオブジェクトの向きを操作します。
サンプルでは水色のZ軸を表す .z と土台を見せるための .ground にかけています。
またアニメーションにも利用しています。

rotate は3D専用のプロパティというわけでないですが、rotateZ などZ軸の概念が加わることで三次元化されます。

3D表現のキモはこのZ軸を意識したオブジェクト操作です。

さらに以下のように translate でオブジェクトの移動を加えると div などのレイヤーをポリゴンのように扱えます。

transform:
  rotateX(*deg)
  rotateY(*deg)
  rotateZ(*deg)
  translateX(*px)
  translateY(*px)
  translateZ(*px);

Codepenデモ

欠点

  • (まだ)重い
  • 単純な3D表現しかできない

あくまで四角の面を3D配置できるだけなので、本格的な3Dグラフィックを表現するものではありません。本格的に3Dをやるなら Three.js などのライブラリを使った方が良いです。

Web表現のアクセントの選択肢としてどうぞ。