東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2016.12.22 Posted by

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

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

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

要素を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が動かない

といった感じです。

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

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278