3Dに画像を回転できるJS mooVRotatingMenu.js

• skull01
• skull02
• skull03
• skull04
• skull05

javascript

<script src="js/mootools1.2.js" type="text/javascript"></script>
<script src="js/mooVRotatingMenu.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	//menu horizontal
	var myHorizontalToto = new mooVRotatingMenu($('rotatingMenu'), $$('.mooRotate'), {
		maxWidth: 250,
		maxHeight: 167
	});
});
</script>

XHTML

id名を変更したい場合は上記javascriptで記述してある($('rotatingMenu')も変更して下さい。

<ul id="rotatingMenu">
<li class="mooRotate skull01"><a href="#footer">Home</a></li>
<li class="mooRotate skull02"><a href="#footer">Home</a></li>
<li class="mooRotate skull03"><a href="#footer">Home</a></li>
<li class="mooRotate skull04"><a href="#footer">Home</a></li>
<li class="mooRotate skull05"><a href="#footer">Home</a></li>
</ul>

CSS

ここでマウスオーバーで反応する領域をきめてます。

#rotatingMenu	{
	width: 580px;
	height: 300px;
	position: relative;
}

a要素の大きさ、背景画像を表示する為にテキストは飛ばします。
※テキストをそのまま使いたい場合は飛ばさなくても大丈夫です。

#rotatingMenu .mooRotate a	{
	display: block;
	width: 250px;
	height: 150px;
	text-indent: -9999px;
	overflow: hidden;
}

それぞれの画像を読み込んでます。

.skull01 {
	background: url(image/skull01.jpg) left top no-repeat;
}
.skull02 {
	background: url(image/skull02.jpg) left top no-repeat;
}
.skull03 {
	background: url(image/skull03.jpg) left top no-repeat;
}
.skull04 {
	background: url(image/skull04.jpg) left top no-repeat;
}
.skull05 {
	background: url(image/skull05.jpg) left top no-repeat;
}