こんにちは。秋が駆け足で過ぎ去り、朝お布団から抜け出すのに一苦労する季節となりました。
今回は先日、公開した読売新聞さま採用サイトのメインビジュアル（MV）に使用した「CSSだけで奥行きのある表現」の実装方法についてご紹介いたします。
奥行きのある表現をCSSで実装するポイントはふたつ！perspectiveとtransform-styleいうCSSを使用します。perspectiveとtransform-styleについて、MDNでは下記のように説明されています。
perspectiveは CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて 3D に配置された要素に遠近感を与えます。（引用元：perspective（MDN））
transform-styleは CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。（引用元：transform-style（MDN））
簡単に言うとperspectiveで設定する値が小さいほど手前に、大きいほど奥に配置されているような見え方になります。 （例：500px = 強い遠近感、2000px = 穏やかな遠近感）
それでは、実際に立方体を作ってみます。
ゴールは、蓋のない四角の箱。 （蓋をしちゃうと中身が見ないので、今回は蓋なし）
まずは展開図からはじめます。
ステップ1：展開図を作る
平面の展開図を作ります。CSS Gridを使って十字型に5つの面を配置します。
各面は100×100pxの正方形で、中央に数字（1〜5）を表示しています。
※面に書いてある数字は後の3D変換で、どの面がどう動いたかを確認するための目印です。
ステップ2：perspectiveを設定
bodyにperspective: 1000pxを追加して、3D空間の奥行き感を作ります。また、.netにtransform-style: preserve-3dを設定して、子要素の3D変換を保持します。perspectiveは「観客席の位置」のようなものです。 今回はbodyに設定していますが、必ずしもbodyでなくて構いません。 重要なのは、3D変換したい要素の親要素に設定することです。
ステップ3：面を折りたたむ
各面を3D空間で回転させて箱型にします。ここで重要なのが回転の基準点です。
この場合のtransform-originは紙を折る時の「折り目の位置」だと考えてください。
bottom center：下辺を軸に回転（上向きに折る）top center：上辺を軸に回転（下向きに折る）left center：左辺を軸に回転（右向きに折る）right center：右辺を軸に回転（左向きに折る）
ステップ3-1：面2と面5を折りたたむ
折りたたむ順番は何でも良いのですが、今回はわかりやすように2面ずつ折りたたみます。
面2（上）: transform-origin: bottom center + rotateX(-90deg) で90度折る
面5（左）: transform-origin: right center + rotateY(90deg) で90度折る
折りたたむ角度がわかりやすように、.net要素もtranformを使用して傾けました。
ステップ3-2：面3と面4を折りたたむ
面3（右）: transform-origin: left center + rotateY(-90deg) で90度折る
面4（下）: transform-origin: top center + rotateX(90deg) で90度折る
完成！CSS 3Dボックスの出来上がり
これで蓋のない箱型の3D表現が完成しました。この技術を応用して、読売新聞さま採用サイトのメインビジュアルを制作しました。 実際のサイトでは、直方体にして、アニメーションを加えるなどといった工夫を加えています。
CSSだけで奥行きのある実装ができる！
CSSで実装できると下記のような利点があります。
- JavaScriptなしで3D表現が可能
- レスポンシブ対応も容易
- パフォーマンスが良い
私がこの技術に初めて出会った時、「CSSだけでこんな表現ができるんだ！」とワクワクしました。
それまでは3D表現といえばThree.jsやWebGLなど、JavaScriptライブラリが必要だと思い込んでいたからです。
実際に読売新聞さまの採用サイトで実装してみて、 「ブラウザで動く3D表現」の可能性の広さを改めて実感しました。
Web技術は日々進化していて、新しい発見がありとっても楽しいです。
これからも学んだことをアウトプットしながら、表現の引き出しを増やしていきたいと思います。
それでは今回はこのへんで。お読みいただきありがとうございました！