More than 5 years have passed since last update.

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

Last updated at 2019-04-04Posted at 2017-10-11

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

サンプル

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

以上３点です。

perspective: 1000px;

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

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

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

transform-style: preserve-3d;

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

これは単なるお約束の3D宣言です。
これが無いと perspective や 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);

See the Pen Cube by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

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

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