Zenn
🎄

CSSを使った3D表現について

2022/11/29に公開
Three.js
sprite3d
tech

（※過去のブログ記事をZennにアップしています。）

CSSのtransformを使った3D表現について、サンプルを交えて、簡単に説明します。

3D表現というと、技術的に複雑な印象を持たれる方もいるかもしれませんが、CSSのtransformを使えば、プログラムなしで、比較的簡単に3D表現を実装することが可能です。

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

は、以下の3つになります。

  • perspective
  • transform-style
  • transform

perspective

perspective: 1000px;

単体では何も起こりませんが、transformで奥行きを出すためのプロパティです。

transform-style

transform-style: preserve-3d;

3Dで表示しますという宣言です。
これが無いとperspectiveやtransformをかけても立体感が付きません。

transform

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

3D化するオブジェクトの向きを操作します。

CSSの3D表現のサンプル

これらのプロパティを活用して、シンプルな面を3D表現で回転させてみます。

次は、複数の面を、transformプロパティを使って、立方体の6面になるように並べます。

WebGLを使った3D表現との違い

3D表現をよりリアルなものにするためには、陰影が必要になりますが、CSSでの3D表現では陰影をつけることができません。これまでのサンプルは、表面を透過させたり枠線をつけたり、陰影表現がなくても立体を認識することが可能でした。次のサンプルでは、試しに、全て同色に塗りつぶした例になります。

一般的にブラウザを使って3D表現をするにはCanvas要素とWebGLを使う必要があります。ただ、WebGLを直接利用するには技術的難易度が高く、通常Three.jsといった、ライブラリを使うのが一般的です。

https://threejs.org/

今回Three.jsについては深く触れませんが、同じような立方体をWebGLを使って再現するとこんな感じになります。

陰影がついて、よりリアルな3D表現になったかと思います。

JavaScriptライブラリ「Sprite3D」を使ってCSSの3D表現を行う

立方体が複数になったり、それぞれが個別に動いたり、といった表現もCSSで再現可能ですが、記述が煩雑になってきます。

Sprite3Dという、CSSの3D表現を管理してくれるJavaScriptライブラリを使うことで、インタラクション性を持たせることや、より複雑な表現を行うことを容易にしてくれます。

https://minimal.be/lab/Sprite3D/

Sprite3Dを使った簡単なサンプルです。

CSSでの3D表現ではtransformプロパティを使って、x、y、z軸で回転、移動させることで、3次元的な表現を実現させますが、基本的には平面だけで構成されます。平面を組み合わせることで、立方体を作ることができますが、それ以上複雑な形となると、再現が難しくなります。その場合は、先に述べたようにCanvasとWebGLを使うという選択肢になります。

CSSの3D表現の可能性

複雑な立体物は表現できませんが、CSSとDOM（HTML）をそのまま利用できるのが、大きな利点です。CSSアニメーションと組み合わせたり、HTML要素を利用したり、通常のWebサイトの演出の一環として、3D表現を取り入れることが可能です。

http://knockknock.jp/tech-lab/20191115/

まとめ

3Dの表現力は、驚きとワクワクをユーザーに提供することができます。特別に凝ったことをしなくても、3Dというだけで特別な事になり得ます。ただ、技術的な難易度も高く、実装側からは敬遠されがちかもしれません。（※あくまで個人的な感想です）

CSSで3D表現を行う事で、いつもの技術の延長で、必要なところに必要なだけ3D表現を実現することが可能になります。Webブラウザで3Dといえば、Three.jsばかり注目されがちですが、CSSでの3D表現も、少し見直してもらえればと思います。

Discussion