<p class="thumb"><img alt="画像回転JS 「mRotate.js」  MooTools版" src="http://web-marketing.zako.org/images/mRotate-js.jpg" width="514" height="204" /></p><p>jQuery版があれば十分なのですがｗ MooTools版も出たみたいだよということでご紹介。</p>

<!--more-->
<h3 class="header-label">画像を回転させる 「mRotate.js」がMooToolsでも出た</h3>
<dl class="head-line">
<dt>Rotation of -25</dt>
<dd><img id="image" src="http://web-marketing.zako.org/images/logo.jpg" alt="" /></dd>
<dt>Rotation with angle = 65&deg;</dt>
<dd><img id="image2" src="http://web-marketing.zako.org/images/logo.jpg" alt="" /></dd>
<dt>マウスオーバーでグルグル</dt>
<dd><img id="image3" src="http://web-marketing.zako.org/images/logo.jpg" alt="" /></dd>
<dt>使用しているJS</dt>

<dd><textarea name="code" class="js">
<script src="js/mootools.1.2.1.js" type="text/javascript"></script>
<script src="js/mRotate.js" type="text/javascript"></script>
<!--[if IE]>
<script src="js/excanvas.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript">
document.addEvent('domready', function () {
$('image').rotate(-25);
$('image2').rotate({angle:65});
var rot = $('image3').rotate({maxAngle:180, minAngle:-180,
bind:
[
{"mouseenter":function(){rot.rotateAnimation(180);}},
{"mouseleave":function(){rot.rotateAnimation(-180);}}
]
});
});
</script>
</textarea></dd><dd>↑これをHead間に入れています。'image' 'image2' などのところで、回転量を調節できます。</dd>
<dt>使用しているHtml</dt><dd>
<textarea name="code" class="xhtml">



</textarea></dd>
<dd>↑JSで各IDの回転度合いを指定して、画像にはIDをそれぞれ振るだけです。</dd>
</dl>
<p>興味のある方は、<a class="website-link" href="http://www.piksite.com/mRotate/" onclick="window.open('http://www.piksite.com/mRotate/'); return false;">mRotate</a>からプラグインセットをダウンロードしてください。</p>
<p>ごくたまにだとは思いますが、画像を回転させたい時ってありますよねｗ ブログジャンルによっては、雑誌などと同様に斜めにしたいこともあるはず。（私の場合はスノーボードですねｗ）ぜひ覚えておきたい一品ですね。</p>
<p>Via：<a class="website-link" href="http://delicious.com/url/815184651ff2d5c0022627e8eaeb9b7b" onclick="window.open('http://delicious.com/url/815184651ff2d5c0022627e8eaeb9b7b'); return false;">Delicious</a></p>