TURNBOX是一款效果非常酷的jQuery扁平风格元素3D翻转动画特效插件。该插件可以将扁平风格的元素执行3D翻转动画，它可以制作多种特效，如登录表单、联系人表单、颜色拾取器、警告框、提示框、tab选项卡、文件上传器及单选和多选按钮等等。

使用方法

使用该3d翻转动画特效插件首先要引入jQuery和turnBox.js文件。

<script src="js/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/turnBox.js"></script>
HTML结构

该3d翻转动画特效插件的HTML结构使用一个<div>包裹用于制作旋转面的子<div>。基本结构如下，最少需要两个面（即2个子<div>），最多4个面，多于4个面的会被删除。

<div class="sample">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
初始化插件

在页面加载完毕之后，可以使用下面的方法来初始化该插件。

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

配置参数

下面是该3d翻转动画特效插件的所有可用参数及其默认值。

$(".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：偶数面的长度。
  • perspective：3D透视的强度。
  • duration：动画的持续时间。
  • delay：动画开始前的延迟时间。
  • easing：动画的easing效果。如果是使用 transition-timing-function ，可以设置一个贝兹曲线函数。
  • direction：3D旋转的方向。"negative"表示反向旋转。
  • type：可以选择下面3种类型的旋转动画。
    • "real"：在屏幕上每次都旋转90度。
    • "repeat"：Will repeat the animated movement of screens 1 and 2 for screens 3 and 4.
    • "skip"：忽略没有指定的面，将指定的面旋转90度。可以在turnBoxButton上使用turnBoxButtonTo来指定需哟啊旋转的面。（参考下面的说明）

turnBoxButton

在子元素上添加turnBoxButton class，你可以在这个面上设置一个触发旋转的事件。

默认情况下，旋转动画会在旋转时显示下一个面，你可以通过添加turnBoxButtonPrev class，使它旋转到前一个面。

默认情况下，turnBoxButton的事件被设置为click，你可以通过下面的class来改变它。下面的class字符串在"turnboxButtonEvent"之后的字符与jQuery事件的名称是一致的。

  • "turnBoxButtonEventClick"
  • "turnBoxButtonEventMouseover"
  • "turnBoxButtonEventMouseup"
  • "turnBoxButtonEventMousedown"
  • "turnBoxButtonEventMousemove"
  • "turnBoxButtonEventMouseout"
  • "turnBoxButtonEventTouchstart"
  • "turnBoxButtonEventTouchmove"
  • "turnBoxButtonEventTouchend"

对于设置类型为"skip"的元素，使用turnBoxButtonTo class并添加要显示的面的数字，这时没有指定的面将被忽略，指定的main会被旋转90度。

<div class="sample">
  <div>
    <p class="turnBoxButton">NEXT</p>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonPrev">PREV</span>
    <span class="turnBoxButton">NEXT</span>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonEventMouseover turnBoxButtonEventTouchstart">NEXT</span>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonTo1">skip to 1</span>
    <span class="turnBoxButton turnBoxButtonTo2">skip to 2</span>
    <span class="turnBoxButton turnBoxButtonTo3">skip to 3</span>
  </div>
</div>

turnBoxLink

.turnBoxLink()方法可以在盒子之外开始执行3D旋转动画，例如使用一个按钮来触发。

$(".link-sample").turnBoxLink({
  box: ,
  events: "click",
  dist: "next"
});
  • box：要执行动画的元素。
  • events：jQuery事件。你可以通过空格来分割多个事件。
  • dist：设置为prev可以使动画翻转到前一个面。

浏览器兼容

  • Google Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 10+

关于该d翻转动画特效插件的更详细信息，请参考：https://github.com/nohtcoltd/turnbox_js