首页 > 学习笔记 > jQuery结合CSS3实现3D翻转(jquery 翻转效果) – Rotate3Di
2012
06-28

jQuery结合CSS3实现3D翻转(jquery 翻转效果) – Rotate3Di

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’。

最后编辑:
作者:admin
这个作者貌似有点懒,什么都没有留下。