3Dでぐるぐる回るjavascript「jquery 3d rotator」

実用性はあまりないかもしれませんが、リンクが3Dで面白い動きをするjquery 3d rotatorです。
商品画像にリンクを張ることで回転式の陳列が可能になるかもしれません。

使用方法

jquery 3d rotatorからrotator.jsをjQueryからjquery.jsをダウンロードします。
＊配布先サイトのスクリプトでは、hrefで位置を指定しているのでリンク先にいきません。
　当サイトではtitle属性に変更していますので、以下からダウンロードしてください。
　rotator.js

<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/rotator.js" type="text/javascript"></script>
<style type="text/css">
html {overflow: hidden;}
body {background: #222;width:100%;height:100%;margin:0px;padding:0px;}
#x_axis {border:1px solid #555;width:100%;height:1px;position:absolute;top:50%;}
#y_axis {height:100%;width:1px;position:absolute;left:50%;}
#y_axis_line {border:1px solid #555;height:100%;width:1px;position:absolute;left:50%;top:0px;}
#links a {padding:0px;margin:0px;z-index:100;position:absolute;left:0px;top:0px;width:100%;height:100%;}
a {text-decoration: none;color:#fff;}
a:hover	{text-decoration: none;background:#ff8000;color:#fff;}
a:visited {text-decoration: none;color:#fff;}
a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;}
img {border:none;}
</style>

上記を記述し、回転させたいリンクを以下のように書き込みます。

<div id="y_axis_line"></div>
	<div id="x_axis">
		<div id="y_axis">
			<div id="links">
			<a href="" title="x=-340&y=240&z=-161">テキスト</a>
			</div>
		</div>
	</div>

上記のtitleで初期位置をx軸、y軸、z軸を±360で指定します。
テキストと表記した場所は画像でもOKです。

サンプル

3Dでぐるぐる回るjavascript「jquery 3d rotator」：サンプル Javascriptサンプルページ一覧

skuare.net