CSS3D：3Dギャラリー

2014年6月6日 · by KaBuKi · in HTML5/CSS3

JSを使わずCSSのみで3D回転するギャラリーを表現しています。
もちろんIEちゃんでは正常表示されません。

※コード自体はシンプルに書きたかったので幅100%指定しているため上記サンプルはウィンドウ内でパンパンに表示されてますが、こちらのリンクから全体化表示で見た方が「らしく」見えると思います。

ソース自体は上記のCodePenサンプルをご覧ください。
CSS自体のキモはperspective、preserve-3d、rotateといったtransform系プロパティですが、その辺りは他所に正確で詳しい情報がたくさんありますので説明は避けます。

3Dに構成するための考え方について順序を紹介します。

これ自体は何の変哲もないと思います。
考え方として<li>の中心軸、<div>の中心軸を意識しておくとよいと思います。

<li>の内側を向けるイメージで、<div>を回転させます。

同様の<li>をコピーし、角度をずらしつつY軸回転することで円環状に並びます。
あとは親の<ul>にY軸回転アニメーションをつけて完成です。

<div>の中に画像を納めればギャラリー風の体裁になりますね。

サンプルでは<div>にhoverスタイルを付けていますが、ポインター反応が微妙です。

奥側の<div>はどうにも前後の<li>がかぶってしまうようで、<li>の背景を消してもオブジェクトとしては存在するので直接<div>に触れない状態があるのでここは何とかしたいなと思うのでもう少し模索してみます。