CSSの3D表現のはなし

こんにちは、フロントエンドエンジニアをやっております原田です。
普段はwebページのマークアップやらJSやらなにやら、サーバサイド以外のコードは手広くやっております。実にフロントエンドですね。

ところで、webコーディングをする方ならば、GPUレンダリングを有効にするために

transform: translate3d(0, 0, 0);

を使うことありませんか？

ただ、（もはや2D transformでも大丈夫説は置いといて）この３つ目の値を有効にした人はどれだけいるでしょうか？

本日は、普段の業務で使わないけど気にはなるCSSの3D表現についての記事となります。

WebGL

とはいっても、やっぱりwebでの3Dと言えば、WebGL(Canvas + JS)ですよね。
[three.js] (https://threejs.org/)など、素晴らしいライブラリもありますし、リッチな表現にはやっぱり強いです。
サンプルをみているだけでもワクワクしちゃいます。

ユーザーに何のプラグインも導入してもらう必要がない、ってのも、大きな利点ですね。

一方その頃CSSは...

transform-style

なるほど、、、できなくはない、ということですね。

使ったことはないけれど、まあ何とかなるでしょう。

だってCSSだもんね！！

エラーないのって最高さ！！

使ってみる

というわけで、デモを作ってみました。

SEOに強い建物(Chromeの最新版を非常に推奨)

画面右上の「build」ボタンを押すと段落が建物になります。

CSSならではのメリット

これが上記のデモに繋がるわけですが、CSSはあくまでHTMLタグのスタイルを指定する言語なのです。

逆に言うと、セマンティックなマークアップを保ったまま3D表現が可能なわけですね。

人だけでなく、クローラーにもやさしく。。。これもまた、webコーディングの重要ポイントであります。
まあ、やってみてわかったのは、ページを3Dで構築することの大変さだったわけですが。。。

ここが変だよCSS

調整が大変

全ては根性です。

例えば、立方体3面に当たる光の加減。
3Dなら光源作ればいいところを、３面に違う背景色を設定して、いい感じになるよう調整するわけです。「#eee、、、いや、#dddだな！」

例えば、位置調整。
普通のwebページの段落を3Dにするのは結構大変（位置が安定しない）で、結局デモでは大枠の縦横を固定して何とか表示しています。
通常のwebページであれば、文章量によってページの長さは変わるはずなので、ここは結構クリティカルですね。

それに「立方体」を作ろうと思うと、6面必要な訳ですが、CSSで一個のタグに埋め込めるのはbeforeとafterの擬似要素だけなのです。。。
そうなると、3D表現用にHTMLタグを追加するという、CSSからしたらとても不本意な結果を招きかねないので、注意が必要です（デモは上・左右合計3面のハリボテです）。

WebGLのがすごい

そうなのです。根性を極限まで使えば、CSSでできないこともないでしょうが、そこまでいったらおそらく、現状、ライブラリも豊富で、ブラウザ依存もCSSほどはなく、JSで思うまま操れるWebGLのがコスパは良いと思われます。

辛いぜ。

ここがすごいよCSS

何となくで3Dができる！！

何となくで3Dができる！！（大事なことなので(ry）

見た目でもコードでもフツーのHTMLが変形するのはロマン！！

CSSの3D表現の使いどころ

色々書きましたが、とっつきやすく取り入れやすいのがCSSの良いとこだと思います。

・モジュールでかち合わない程度に使う（ナビゲーション、プルダウン、カルーセルなど、パーツで完結させる）
・大味な3D（段落を一個の立方体の面に配置し、スクロールで回転させるとか）
・2D表現のもうひと押し（パララックスの奥行き感の増加、ボタンのインタラクションとか）

などなど、既存のwebページの表現のスパイス的に使うのが現状コスパが良いんじゃないでしょうか。ブラウザ間の差異もまだありますしね。

とはいえ、イイ感じのプロパティがブラウザで採択されるのを、楽しみにせずにはいられません。
何となくで3Dがゴリゴリできちゃう未来に期待！！！