どうも！LSSです！！
ブロガーの皆様の中には、写真や絵などの画像をコンテンツのメインに据えられている方も多いかと思います。
普通に並べても素敵な写真、こんな見せ方はいかがでしょうか？
※2021/12/25追記！機能改善した【CSS/JavaScript】多角形フォトギャラリー改訂版もあります^^
六角フォトギャラリー
六枚の環状に並んだ画像のどれかをクリックすると、その画像がその下に大きく表示されます。
コード
<style>
#ph3d{
position:relative;
transform-style:preserve-3d;
width:150px;
height:150px;
left:75px;
transition:1.5s;
transform:rotateX(-10deg) rotateY(-10deg);
}
#ph3d img{
position:absolute;
box-sizing:border-box;
width:100%;
}
#ph3d0{transform:translateZ(150px);}
#ph3d1{transform:rotateY(60deg) translateZ(150px);}
#ph3d2{transform:rotateY(120deg) translateZ(150px);}
#ph3d3{transform:rotateY(180deg) translateZ(150px);}
#ph3d4{transform:rotateY(-120deg) translateZ(150px);}
#ph3d5{transform:rotateY(-60deg) translateZ(150px);}
</style>
<div id="ph3d">
<img src="一枚目の画像ファイルURL" id="ph3d0" />
<img src="二枚目の画像ファイルURL" id="ph3d1" />
<img src="三枚目の画像ファイルURL" id="ph3d2" />
<img src="四枚目の画像ファイルURL" id="ph3d3" />
<img src="五枚目の画像ファイルURL" id="ph3d4" />
<img src="六枚目の画像ファイルURL" id="ph3d5" />
</div>
<p><img id="ph3dimg" /></p>
<p>
<script>
ph3dimg.src=ph3d0.src;
ph3d.addEventListener('click',
function(ph3de){
ph3d.style.transform='rotateX(-10deg) rotateY('+(parseInt(ph3de.srcElement.id.substr(4,1))*-60-10)+'deg)';
if(ph3de.srcElement.tagName=="IMG"){ph3dimg.src=ph3de.srcElement.src;}
}
,false);
</script>
上記コードをコピペし、赤文字部分を表示させたい画像ファイルのURLに置き換える事で使用できます^^
あとがき
【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software
【CSS/JavaScript】立体サイコロ、完成！ - Little Strange Software
などで作った立体サイコロの改変です。
90度単位で配置していたのを60度単位に変更し、天面と床面を無くした事で、六角形にしました。
…フォトギャラリーとしては「６枚限定」なのがちと扱いづらいかもですね^^;
七角形、八角形…と何角形でも同様に作る事は可能ですが、計算が大変になるのでもしそれを作るなら「計算も含めて全てJavaScriptに任せる」ようなものを作った方が良さそう。
とりあえずは六角形のもので公開しちゃいました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
