2018年12月9日

デザイン

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

目次

  1. はじめに
  2. 今回作成していくもの
  3. HTML解説
  4. CSS解説
  5. まとめ

はじめに

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

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

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

1.png (151.5 kB)

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

今回作成していくもの

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

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

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

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

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

1.gif (2.2 MB)

こちらは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 が二つあることです。

こちらの2つは後ほど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は大きく4つの部分に分けられます。
– 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空間を設定しますよ!というものだと思ってください。

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

POINT!!

「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)手前にします。

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

先ほどの前面のスタイルを90度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と比べて、それぞれのプロパティの依存関係が多いため、少し手を出しにくいですが、きちんと要素を噛み砕いて理解すると、サイトにちょっとした工夫を加えることができ、とても便利なのでぜひ試してみてください。

2

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP