• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

技術情報・Tips

[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSSのtransformを利用した3Dアニメーションの実装例をご紹介します。

タイル状のグリッドレイアウトは、定番jQueryプラグイン「Masonry」に丸投げ!しているので、Masonry自体についてはここでは割愛します。

というわけて、まずは実際のデモをご覧ください!

See the Pen 3D Panel Flip Motion on Mouse Over by digistate (@digistate) on CodePen.


JavascriptはMasonry関連の処理のみを記述しているので、マウスオーバーのフリップモーションに関してはすべてCSSのみで表現しています。

HTMLの構造

パネルとなるそれぞれの画像の部分は、articleタグで括ってあり、その中の構造は以下のようになっています。

articleの中には、パネルのラッパーとなる .item セレクタを付けたdiv要素、さらにその中に実際に表示する前面のパネル(.item-img)とマウスオーバー時に回転して現れる背面のパネル(.item-content)があります。

わかりやすく図示するとこのような状態です。
capture 2016-06-10 10.46.08

タイルレイアウトパターン

今回のサンプルでは、すべて同じパネルサイズではなく4パターンのサイズを組み合わせて構成されるグリッドレイアウトにしています。
グリッドの基準は5カラムで、1カラムの幅を基準とする正方形をパネルサイズの最小単位として、以下の4パターンを組み合わせています。

パネルサイズパターン(縦 x 横:比率)

  • 1 x 1 (.small ※基準サイズ)
  • 1 x 2 (.wide)
  • 2 x 1 (.long)
  • 2 x 2 (.big)

capture 2016-06-10 12.00.42
articleに対して、上記のサイズパターンをCSSで定義したセレクタを付けてグリッドレイアウトを構成しています。

マウスオーバー動作の流れ

CSSで前面パネルが回転して背面のパネルが表示される動作を定義していますが、基本的な流れは以下です。

  1. articleをマウスオーバー
  2. .item(パネルのラッパー)が前面(X軸マイナス)方向に180度回転
  3. 予め180度反転させていた背面(.item-content)が前面になる

CSSの構成

グリッドレイアウトを表示する幅は、960ピクセルとし、それを5カラム(5等分)に分割(1カラム = 192ピクセル)することを前提に、まず、基準サイズとなるarticleは以下のようにサイズを定めています。

article

なお、perspectiveプロパティは、回転アニメーション時にパネルの遠近感をよりリアルに表現するために指定しています。
perspectiveについてはこちらが参考になります。

今回のサンプルでは、このグリッドを基準として他に3パターン(.wide, .long, .big)があるので、それぞれセレクタを付けてサイズをセットしています。

パネルのラッパー(.item)

前面と背面のパネルを包括しているラッパー要素(.item)には、以下のCSSを適用しています。

transform-style:preserve-3dは、前面と背面の3次元における位置関係を保持しておくために必須のプロパティです。
これを指定しないと、位置関係がないため、前面用の要素を背面要素が隠してしまいます。

transform-styleについてはこちら

パネル要素(.item-img, .item-content)

前面(.item-img)、背面(.item-content)要素は同一サイズで共通の定義にしておきます。

backface-visibility: hidden は、transformtransition を組み合わせたCSSアニメーションを施した際に発生するチラつきを防止するための指定です。
詳しくはこちらを参考に。

なお、パネルに表示する画像はそれぞれ異なるため、CSSではなくパネル要素のインラインのスタイルとして個別にセットしています。

背面パネル要素の初期化(背面に移動)

背面パネル(.item-content)は、文字通り背面に反転(180度)させておくため、transformで180度回転しておきます。

これにより、親要素(.item)で指定した transform-style:preserve-3d によって、3D空間の位置が保存され、前面パネルの真後ろにぐるっと反転して回りこんだ状態となります。

マウスオーバー時に回転させる

ここまで来たら、後はマウスオーバー時に transformでくるっと180度逆回転させて背面パネルを表示するCSSをセットするのみ!

マウスオーバーのトリガー(:hover)は articleにし、回転させる対象はパネルのラッパー要素(.item)にします。


次回は、平面のパネルではなく、要素をキューブ状の立方体に見立ててマウスオーバーで回転させるサンプルをご紹介します。

URL
TBURL

COMMENT ON FACEBOOK

Return Top