サムネイルクリック型のフォトギャラリーで、いわゆる、3D WALL 型などと呼ばれているタイプのフォトギャラリーである。サムネイルが、奥まった中央のサムネイルに、両側から遠近感をもってサムネイルが近づいていくように見える。今回のサンプルは、５列３行のものであるが、もっと行列数を増やして、画面いっぱいに並べたら迫力あるものになるであろう。

サンプル（DEMO）

　このサンプルは、イメージを示したもので、クリックに反応しません。
　別ページの、サンプルを見てください。

本サンプル作成に用意した画像

　・サムネイル　150*84px　15枚
　・写真　　　　600*338px 15枚

本サンプル表示用HTML

　サンプルページに併記してあります。
　・15のサムネイルは、左２列、中央１列、右２列の３つのブロックに分け、左右に遠近感を持たせて効果を出している。
　・各サムネイルに相当する拡大写真へ a タグでリンクを貼っており、css の :target で発生したクリックイベント元を認知し、その写真を表示するようにしている。
　・拡大写真は、.photoの中央に表示するようにし、黒色半透明のbackgroundに閉じる印として✖を右上に表示するようにした。
　　（写真が表示された後は、stageのどの部分をクリックしても元に戻る）

本サンプル表示用CSS

　サンプルページに併記してあります。
　・表示枠（#stage）は、max-width:700px;　としているが、この値を変えると、サイズが変更できるようになっている。ただし、大きく表示するときは、準備する写真のサイズも大きくする必要があるし、ステージの高さや設定しているmarginなどの数値も調整が必要になる。
　・左右のブロックに、例えば、transform: perspective(700px) rotateY(24deg) translateZ(25px);　などと3D効果を施しているが、これらの数値を変えれば、遠近感の具合が変わる。
　・サムネイルがうまく並ぶように、それぞれのブロックの幅、マージンなどを微妙に調整しているので、写真サイズなどの条件が変われば、これらの数値を変更する必要が生じる場合もある。