jquery.imagecube:複数画像をサイコロの様に回転表示するJs



複数の1枚画像をサイコロの様に回転して表示します。

1.CSSの記述

<style type="text/css">
<!--
#idCube{ 
  width:300px;
  height:300px;
  margin:0 auto;
}
a img{
	border: none;
}
#linksCube img{
	width: 100%;
	height: 100%;
}
-->
</style>

2.読込むJsとJavaScriptの記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.imagecube.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#idCube").imagecube({randomSelection:['up', 'down', 'left', 'right']});
});
</script>

3.HTMLの記述例

    <div id="idCube">
    <img src="images/i1.jpg" width="300" alt="" />
    <img src="images/i2.jpg" width="300" alt="" />
    <img src="images/i3.jpg" width="300" alt="" />
    <img src="images/i4.jpg" width="300" alt="" />
    <img src="images/i5.jpg" width="300" alt="" />
    <img src="images/i6.jpg" width="300" alt="" />
    </div><!--/idCube-->

jquery.imagecube:複数画像をサイコロの様に回転表示するデモページ

ソース元:jQuery Image Cube

Jsで3Dゲームとか出てくるんでしょうね。
CADウィーバー的な開発ツールとか3dQuery的なライブラリも出たりして。