【CSS】3D transformsでコロッとなるエフェクトを作る

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay9です！

昨日はReact 360の環境構築についての記事でした。

【これからはじめるReact 360】 まずは環境構築

今日は、CSS 3D transformsでナビがコロッとなるエフェクトを作っていきます。

今回作成していくもの

まずは、今回作成していくデモをご紹介します。

今回作成していくデモはこちらです。
(ホバーしてください)

See the Pen Rotate cube by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらの赤い長方形にホバーするとコロッと長方形が傾き、上の面が見えるというシンプルなものです。

実際にどういうところに使えるか実例を見てみましょう。
下記サイトののナビ部分をご覧ください。

こちらはchannel news asiaというシンガポールの中でもかなり有名なメディアなのですが、ちょっとした工夫でうまくスペースを使っていますね。

下にスクロールすると、記事のタイトルが、上にスクロールするとGナビがコロッと出てくる仕様になっています。

実際に動きをみたい方はこちらからどうぞ。
channel news asia

記事ページでしかコロッという動きは見えないので、記事の中に飛んでください。

HTML解説

では、中身のソースコードを見て行きましょう。

まず、今回の全体のHTMLはこのようになっています。

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--top"></div>
  </div>
</div>

そこまで複雑なHTMLではないのですが、ポイントとしては、実際に見えている、赤と紫のコロッとなる面以外にもそれを取りかこむ div が二つあることです。

こちらの２つは後ほどCSSを見るときに大事なポイントになってくるところです。

CSSで3Dのものを作るときには、HTML上では実際に3D空間となるところを定義するマークアップがあると便利になることを抑えておいてください。

HTMLの解説は以上です。

CSS解説

次にCSSを見ていきます。

CSSの全体像：

/*CSS空間を作る部分*/
.scene {
  perspective: 400px;
}

/*立方体の設定*/
.cube {
  width: 1000px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-in-out;
}

/*面の設定*/
.cube__face {
  position: absolute;
  width: 1000px;
  height: 50px;
}

.cube__face--front { transform: translateZ(25px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(25px); }

/*ホバーした時の動き*/
.cube:hover { transform: translateZ(-25px) rotateX( -90deg); }

少し長いので、噛み砕いてみていきます。

こちらのCSSは大きく４つの部分に分けられます。
– CSS空間を作る部分
– 立方体の設定
– 面の設定
– ホバーした時の動き

では、それぞれの部分を見ていきます。

CSS空間を作る部分

まずは、CSS空間を作ります。

.scene {
  perspective: 400px;
}

シンプルなコードです。

先ほどHTMLの部分で少し触れたように、CSSで3D空間を作る場合、全体を div で囲み、 perspective プロパティをかけると効果的です。

（厳密にいうと、これは必須ではないのですが、同じコードを何度も書かないといけなくなったり、複数の3Dオブジェクトを作ったときに空間イメージがおかしくなったりするので、基本CSSで3Dのものを作るときには、3D空間にしたいもの全体に perspective をかけるのがオススメです。）

ちなみに、このperspectiveがないとこのようになります。

See the Pen Rotate cube by Ayaka Sasaki (@ayausaspirit) on CodePen.

一見あまり変わっていないように見えますが、端の方を見ると、3D感が薄れているのがわかります。

下記が perspective: 400px; を加えた場合:

See the Pen Rotate cube by Ayaka Sasaki (@ayausaspirit) on CodePen.

この perspective というプロパティは3D空間を設定しますよ！というものだと思ってください。

数値が高いほど、効果は薄れます！

立方体の設定

次に立方体の設定を見ていきます。

.cube {
  width: 1000px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-in-out;
}

高さ、幅、そしてこの後立方体の中に入れる面を設定しやすくするため、 position: relative; をかけておきます。
（こうすることで、面に position: absolute; をかけた際に立方体ベースで配置できるので作りやすいです。）

また、ホバーはこちらにかけていくので、 transition を加えておきます。

少し気になるのが、 transform-style: preserve-3d; という記述です。

こちらは、親の3D空間を子要素にも引き継ぐための、プロパティです。

こちらがないと、子要素に親の3D空間が引き継がれず、平面的な動きになってしまいます。

transform-style: preserve-3d;がない場合:

See the Pen Rotate cube by Ayaka Sasaki (@ayausaspirit) on CodePen.

こんな感じで周りの立方体自体は3D空間にいるのに、子要素は平面的な世界に閉じ込められたままになるので、気をつけてください。

面の設定

次に実際に見える、面の部分を見ていきます。

.cube__face {
  position: absolute;
  width: 1000px;
  height: 50px;
}

.cube__face--front { transform: translateZ(25px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(25px); }

今回は、必要なコードを見やすくするため、色をつけるCSSなど必要のない部分は省いています。

今回の立方体のそれぞれの面に当てるCSSは、すべての面に当てるCSS、上の面、前の面に当てるCSSに分けられています。

まず、すべての面に共通して当てるCSSには、親要素である立方体にrelativeに配置できるよう、 position: absolute; と高さと幅を設定しています。

次にそれぞれの面に当てるスタイルですが、まずはホバーする前に、見える立方体の前面のスタイルを見ていきます。

.cube__face--front { transform: translateZ(25px); }

前面にスタイルを当てる必要ないんじゃない？と一瞬思われるかもしれませんが、これを消した時にどうなるかというと…

See the Pen Rotate cube by Ayaka Sasaki (@ayausaspirit) on CodePen.

こんな感じで、立方体ではなくT字型になってしまいます。

前面はもう少し手前に持ってきたいので、transform プロパティで translateZ をします。

また、今回の立方体は幅1000px, 高さ50pxなので、高さの半分 (25px)手前にします。

ここまでできたら、あとは簡単です。

先ほどの前面のスタイルを９０度X軸に回転させるだけで上面を作ることができます！

.cube__face--top { transform: rotateX( 90deg) translateZ(25px); }

ホバーした時の動き

これで必要な材料は揃ったので、最後にホバーした時に動きを加えていきましょう。

.cube:hover { transform: translateZ(-25px) rotateX( -90deg); }

ホバーの動きはそれぞれの面ではなく、 .cube の方にかけるとシンプルで楽です。

rotateX(-90deg) で手前に回転させます。

ただ、これだけだと、立方体が手前に回転してくるような動きになってしまいます。

See the Pen Rotate cube by Ayaka Sasaki (@ayausaspirit) on CodePen.

なので、それを抑えるために、translateZ(-25px) を加え、元の位置でコロッとするように調整してあげましょう！

まとめ

以上、今日はCSS 3D transformsでナビがコロッとなるエフェクトを作っていきます。

CSSで作る3Dオブジェクトは普通の平面のCSSと比べて、それぞれのプロパティの依存関係が多いため、少し手を出しにくいですが、きちんと要素を噛み砕いて理解すると、サイトにちょっとした工夫を加えることができ、とても便利なのでぜひ試してみてください。