CSS×Mayaで作る立体サイコロアニメーション
こんにちは、新人デザイナーの佐藤です。
今回は「CSSでの3D表現」について書かせていただければと思います。
というのも最近、業務で CSS を触る機会があるのですが、「CSS では立体的な表現はできない」と勝手に思い込んでいました。しかし調べてみると、CSSの3D変換機能を用いれば、サイコロのような立方体を動かせることがわかりました。やってみたいという思いから学習を進めてみたのですが、ブラウザ上だけはどの数値を調整すればいいのかという感覚がなかなかつかめませんでした。そこで、Mayaでアニメーションを制作して、それをCSSに落とし込むという方法を試してみましたので、まとめてみたいと思います。
1. Mayaでサイコロを動かしてみる
まず、Maya でサイコロをモデリングし、すべての面が順に見えるよう回転させるシンプルなアニメーションを作成してみました。設定は以下のとおりです。
- ループ時間：4秒
- 回転軸：X 軸を720°（2周）、同時に Y 軸を360°（1周）
このMayaのアニメーションから、後でCSSに活用するために、各秒（1秒、2秒、3秒、4秒）の時点でのX軸・Y軸の回転角度を確認しておきました。これをもとにCSSのキーフレームに落とし込んでいきます。
2. CSSでサイコロを再現
次に、HTMLとCSSだけで立方体を組み立てます。CSSで立体的に見せるためのポイントは以下の3つで、これにより3D表現が可能になります。
①遠近感を生み出す 「perspective」: 親要素に指定するだけで、奥行きが生まれます。
②要素を3D空間として扱う 「transform-style: preserve-3d」: これがなければ、平面のままになってしまいます。立体として動かすための必須プロパティです。
③各面に画像を貼り付ける 「background-image」 と 「background-size」: これにより、サイコロの各面に画像をはめ込んでいきます。
3. 実際のアニメーションを書いてみる
Mayaでは「24fpsなら24フレームで1秒」「30fpsなら30フレームで1秒」のようにフレーム数で時間を管理しますが、CSSの@keyframesではアニメーション全体を100%として、各タイミングを割合（%）で指定します。今回は4秒のアニメーションになるので、以下のように変換できます。
- 0% ＝ 0秒（0フレーム）
- 25%＝ 1秒（24fpsなら24フレーム、30fpsなら30フレームに相当）
- 50%＝ 2秒（4秒×0.50）
- 75%＝ 3秒（4秒×0.75）
- 100%＝ 4秒（4秒×1.00）
ここで、1で事前に調べておいた各秒ごとの回転角度を、それぞれの%に対応させて数値として指定します。こうすることで、Mayaで作成したアニメーションと同じ動きをCSS上でも再現できます。
これでマウスを合わせたときだけ回転するアニメーションとして実装することができました。以下、実際に作成してみたアニメーションになります。
入社からの1年でさまざまなことを学んできましたが、今回のように、一見無関係に思えるスキル同士を掛け合わせることで思わぬ成果が得られると実感しています。これからも常に好奇心を持ち、多彩な知識を増やし続けたいと思います。
今回のブログをもって新人ブログは最後の投稿となります。1年間お読みいただき、ありがとうございました！