任意の要素をアニメーションエフェクトで立体的に見せる、というスクリプト・TURNBOX.jsのご紹介。フラットなデザインと相性良さそうです。

要素に立体的なアニメーションエフェクトを与えて、3DなUIにする事ができます。フラットなデザインに使って欲しいとの事です。開発者さんはNOHTさんという日本の企業さんなので疑問があった場合でも連絡が取りやすいので安心ですね。

TURNBOX.js

動作サンプルです

他にもアップロードのローディングに使えたりいろいろ応用幅が広い印象です。

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

↑ 本体とプラグインを読み込みます。

$(".foo").turnBox({
  width: 200, //ボックスの横幅の値を指定
  height: 50, //ボックスの縦幅の値を指定
  axis: "X", //回転軸
  even:, //偶数面の長さ
  perspective: 800, //パースペクティブの強さを指定
  duration: 200, //アニメーションの時間
  delay: 0, //動作開始までの待ち時間
  easing: "linear", //イージングの指定
  direction: "positive", //回転方向の設定
  type: "real" //回転アニメーションの種類を設定
});

↑ セッティング諸々。

アニメーションは極力CSSで動かしてるみたいですね。スマフォ等でも滑らかな動きをしてくれそうですね。

ライセンスはMITとの事です。詳細は以下にてご確認下さい。

TURNBOX.js