要素を3D回転させられるプラグイン「TURNBOX.js」

こんにちは、最近どんどん寒くなってきました。

風邪など引かないよう気をつけて下さいね。

ではウェブラボ技術メモです。

要素を3D回転させられるjqueryプラグイン「TURNBOX.js」を使用してみたいと思います。

まずは公式のDOWNLOADタブ内のDownloadボタンからファイルを落としてきてください。

TURNBOX.js公式

公式にもDEMOが沢山あり、どうやら色々と応用が利くみたいですね。

どうやらライセンスはMITとのことです。

今回は簡単なDEMOを3つほど作ってみました。

DEMOはこちら

では説明していきます。

まずはjquery本体と一緒にturnBox.jsを読み込ませてください。

次に3D回転させたい部分の設定を記述します。

3D回転させたい場所のHTMLは以下の通りです。他の2つのDEMOもクラス名が違うだけで同じです。

CSSの指定も自由に行えます。今回は以下のように指定しました。

必要な記述はこれだけです、簡単ですね。オプションなどの詳しい説明は公式にあります。

公式にあるタブなどのDEMO、レスポンシブ対応はJavascriptを自分で追加で書かないといけないみたいなので知識がない人は難しいかもしれません。。。

時間があるときに私も試してみようかなと思います。

対応ブラウザは公式にもありますが以下の通りです。

Google Chrome

Firefox
Safari
Opera
Internet Explorer 10+

まあ予想通りですね。

試しにIE9以下で確認してみましたので参考までに…

IE9 : 3D回転がしなくなるだけでレイアウトが大きく崩れるとかはない。

IE8 : 若干のレイアウト崩れ。
IE7 : そもそもJavascriptが動かない

といった感じです。

以上、ウェブラボ技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。