Rotate3Di是一个可以让任何HTML元素实现等距3D翻转和3D旋转的jQuery插件，它甚至允许你实现自定义3D旋转动画。当然这中间用到了CSS3的transform变换属性，所以这个3D翻转效果也只能在以下浏览器上有效果：Safari, Chrome, Webkit, Firefox 3.5+, IE9+, and Opera 11+。该插件的功能包括：给HTML元素设置任意的等距旋转角度，翻转对象，或者切换对象翻转的状态。
使用插件
为了使用Rotate3Di插件，我们需要再页面上引用jquery 1.2.6或者更高版本的脚本库，jQuery CSS Transform补丁插件，和Rotate3Di自身的插件，代码如下：
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”rotate3Di/jquery-css-transform/jquery-css-transform.js”></script>
<script type=”text/javascript” src=”rotate3Di/rotate3Di.js”></script>
接下来我们就可以用下面的方法来使用Rotate3Di插件了：
$(‘#rot-ex’).rotate3Di(180, 3000);
API说明
方法：rotate3Di(degrees, [duration], [options])
参数1：degrees
类型：Number,String
描述：相对于Y轴的旋转角度，可以是整数，负数和相对值，就像jQuery animate effect中的那样（如：180, -360, ‘+=270’）。或者直接用字符串’flip’, ‘unflip’和 ‘toggle’。
参数2：duration（可选）
类型：Number,String
描述：旋转的时间间隔，可以用三个字符串中的一个来表示翻转速度，’slow’, ‘normal’, 和 ‘fast’，也可以用一个毫秒数来表示比如（1000）。
参数3：options（可选）
类型：Object
描述：动画的一些其他配置，所有 jQuery animate effect options 中的options都支持，除此之外，下面还有一些Rotate3Di自己的options，下面会介绍
选项（options）说明
选项1：direction
类型：String
描述：当degrees参数的值为’flip’, ‘unflip’, 或’toggle’时，direction选项可以使用’clockwise’ 或 ‘anticlockwise’ / ‘counterclockwise’。当degrees参数为数值时，direction值就由degrees的值控制。
选项2：sideChange
类型：function ([front])
描述：在任何时候对象的面被翻转时都会执行该回调函数，该回调函数可以带一个参数，如果对象被翻转至正面则该参数值为true。
选项3：complete
类型：function()
描述：翻转完成后执行的回调函数。
选项4：easing
类型：String
描述：这个和jQuery animate中的easing是一样的，主要是一些翻转的动画特效，可以选择 ‘linear’ 和’swing’，默认值是’swing’。
- 本文固定链接: https://www.cnmiss.cn/?p=316
- 转载请注明: admin 于 我的博客 – 技术分享 发表
