[JS]HTMLのコンテンツを3Dに回転させるスクリプト -rotate3Di

`HTMLのコンテンツをアニメーションでくるっと3Dに回転させるjQueryのプラグインを紹介します。

rotate3Di - Flip HTML content in 3D
デモ

[ad#ad-2]

rotate3Diの対応ブラウザ

• Firefox 3.5+
• Chrome
• Safari
• IE 9(pre7+)

多分、Operaも大丈夫とのことです。
※Opera 10で動作しました。

rotate3Diの実装

rotate3DiはjQueryのプラグインのため、実装にはjquery.jsが必要です。

外部ファイル

JSファイルを外部ファイルとして記述します。

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="rotate3Di/jquery-css-transform/jquery-css-transform.js"></script>
<script type="text/javascript" src="rotate3Di/rotate3Di.js"></script>

JavaScript

スクリプトは下記の書式になります。
degress：角度、dutation：スピード、option：オプション

rotate3Di(degrees, [duration], [options])

「#test」に指定する際は下記のようになります。

$('#test').rotate3Di(180, 3000);

スクリプトのオプション

スクリプトのオプションでは、回転の方向、イージング、callback機能などが設定できます。