要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」

クリック時やマウスオーバー時に何かしらの変化を与えることで、ユーザーの興味を喚起することができます。
それを、3D回転のエフェクトでやるとユーザーに驚きを与えることができるのではないでしょうか。
jQuery Plugin: rotate3Diを使用すると簡単にできてしまいます。
要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」サンプル

使用方法
jQuery Plugin: rotate3Diからjquery-css-transform.js、rotate3di-0.9.js、jquery-1.3.2.jsのjs一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-css-transform.js"></script>
<script type="text/javascript" src="rotate3di-0.9.js"></script>
<script type="text/javascript" language="JavaScript">
$(function(){
$('#id名').rotate3Di('角度', 速度);
});
</script>

あとは上記で指定したid名を記述すれば完成です。
<p id="id名">ここが回ります</p>
また、クリック時、マウスオーバー時に変化を与えるのは以下のようにします。
// クリック時
$('#id名').click(function () {$(this).rotate3Di('-=180', 500);});

// マウスオーバー時
$('#id名').hover(
function () {$(this).rotate3Di('flip', 500);},
function () {$(this).rotate3Di('unflip', 500);}
);


要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」サンプル

sponsors

「要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」」をシェアする

記事作成:
記事URL:

TOP > > > 要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」