jQueryプラグイン「TURNBOX.js」は要素に立体的なアニメーションエフェクトを与え、3DかつフラットなデザインのUIにする事ができます。
ユーザーの「行動」を生み出し変化させ目的まで導く、行動デザインの手法「ゲーミフィケーション」的な心地良い動きをフォームなどの要素に持たせることにより、ユーザーの興味・関心を獲得し、モチベーションやロイヤリティを高める事ができます。

設定方法

まずjquery.jsを読み込んだ後でturnBox.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/turnBox.js"></script>

HTMLの配置

turnBox.jsを適用したい要素の直下に、生成したい面数だけ子要素を設置する。
ミニマムは2、マキシマムは4とあります。5以上の子要素がある場合は削除されるようです。

<div class="sample">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

JSの設定

対象となる要素に.turnBox()のメソッドを適用するとデフォルトの値で作成されます。

$(".sample").turnBox();

変更可能なパラメータ

$(".sample").turnBox({
  width: 200,
  height: 50,
  axis: "X",
  even:,
  perspective: 800,
  duration: 200,
  delay: 0,
  easing: "linear",
  direction: "positive",
  type: "real"
});

width: ボックス横幅。
height: ボックス縦幅。
axis: 回転軸の設定。”X”設定で縦回転、”Y”設定で横回転。
even: 偶数面の長さ。axis: “X”設定で縦幅、”Y”設定で横幅。設定しない場合は等幅。
perspective: パースペクティブの強さ。
duration: アニメーションの時間。
delay: アニメーションを開始するまでの時間。
easing: アニメーションの緩急。transition-timing-functionで設定できるeasing、ペジェ曲線を入力できます。
direction: 回転方向の設定。”negative”で逆回転します。
type: 回転アニメーションを以下の３種類から選択できます。

多くのオプションがあり、機能の多くを調整することができます。
ボタンに限らず要素全体に使えるので、シンプルでフラットなUIデザインにもよく合いそうです。
WEBサイト制作、ホームページ作成時に強力なツールとなりますね。
TURNBOX.js