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

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

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

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

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

→TURNBOX.js公式

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

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

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

→DEMOはこちら

では説明していきます。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/turnBox.js"></script>

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

<script>
$(function() {
	//例1　縦回転ver
	$(".rotateBox01").turnBox({
		width: 980, //ボックスの横幅
		height: 170, //ボックスの縦幅
		axis: "X", //回転軸の設定 "X"なら縦、"Y"なら横
		perspective: 800, //パースペクティブの強さ
		duration: 300, //アニメーションの時間
		delay: 0, //アニメーションを開始するまでの時間
		easing: "linear", //アニメーションの緩急
		direction: "positive", //回転方向の設定。"negative"で逆回転
		type: "real" //回転アニメーション "real","repeat","skip"
	});

	//例2　横回転ver
	$(".rotateBox02").turnBox({
		width: 980, //ボックスの横幅
		height: 170, //ボックスの縦幅
		axis: "Y", //回転軸の設定 "X"なら縦、"Y"なら横
		perspective: 800, //パースペクティブの強さ
		duration: 600, //アニメーションの時間
		delay: 0,  //アニメーションを開始するまでの時間
		easing: "ease", //アニメーションの緩急
		direction: "positive", //回転方向の設定。"negative"で逆回転
		type: "skip" //回転アニメーション "real","repeat","skip"
	});
	
	//例3　縦回転＋偶数面の高さが違うver
	$(".rotateBox03").turnBox({
		width: 980, //ボックスの横幅
		height: 170, //ボックスの縦幅
		axis: "X", //回転軸の設定 "X"なら縦、"Y"なら横
		even: 300, //偶数面の長さ "X"なら縦幅、"Y"なら横幅、設定しない場合は等幅
		perspective: 8000, //パースペクティブの強さ
		duration: 400, //アニメーションの時間
		delay: 0,  //アニメーションを開始するまでの時間
		easing: "ease", //アニメーションの緩急
		direction: "positive", //回転方向の設定。"negative"で逆回転
		type: "skip"　//回転アニメーション "real","repeat","skip"
	});
});
</script>

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

<div class="rotateBox01"><!-- 回転させたい要素 -->
	<!-- 最低2、最大4つのブロックを指定 -->
	<div><p>ブロック1</p><p class="turnBoxButton">回転</p></div><!-- 1つめのブロック -->
	<div><p>ブロック2</p><p class="turnBoxButton">回転</p></div><!-- 2つめのブロック -->
	<div><p>ブロック3</p><p class="turnBoxButton">回転</p></div><!-- 3つめのブロック -->
	<div><p>ブロック4</p><p class="turnBoxButton">回転</p></div><!-- 4つめのブロック -->
</div>

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

/* 回転させたい要素 */

.turnBoxFace {
	font-size: 18px;
	text-align: center;
}

/* 1つめのブロック */

.turnBoxFaceNum1 {
	background: #f9d0d1;
}

/* 2つめのブロック */

.turnBoxFaceNum2 {
	background: #94b3fa;
}

/* 3つめのブロック */

.turnBoxFaceNum3 {
	background: #baf9b7;
}

/* 4つめのブロック */

.turnBoxFaceNum4 {
	background: #fbfcbc;
}

/* 回転させたい要素内の設定 */

.turnBoxFace p {
	padding: 20px 0;
}

.turnBoxButton {
	width: 19%;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	cursor: pointer;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

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

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

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

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

Google Chrome

まあ予想通りですね。

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

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

といった感じです。

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