3D旋转特效(touchrotate)

所属分类:其他,输入-动画效果,拖和放

 6507  45  查看评论 (6)
3D旋转特效(touchrotate) ie兼容11

更新时间:2017/10/25 下午5:53:01

更新说明:

1 . 新增了参数 isTransition , 为true时表示有动画效果 , 为false时没有动画效果

2 . 修改bug : 鼠标左键滑动动画进行时 , 如果滑动(左键未点击)box,动画会有异常


更新时间:2017/10/25 下午2:55:56

更新说明:修复了 一个bug该bug只会出在使用JQuery上, 使用Zepto没有这个bug. 

该bug会导致PC端案例演示异常, 当滑动box动画进行中时 , 如果鼠标再次滑动(没有点击鼠标左键) 会干扰动画的bug,


1. 引入插件(前提先引入JQuery或者Zepto)

<script src="jquery-touchrotate.js"></script>

2. 初始化插件

$('.box').touchrotate();

3. 可以配置相关参数

$('.box').touchrotate({
    //初始3D旋转角度
    rotateX: -15,
    rotateY: 15,
    //数值越小 , 旋转速度越快
    speedX: 2,
    speedY: 2,
    // 旋转的倍数, 越大旋转的圈数越多
    multipleX: 50,
    multipleY: 50,
    // 动画持续的时间, 单位是S
    time: 2,
    //模式 0:表示匀速运动 , 运动中途可以重新开始 , 1表示先加速后减速(动画过程中不可滑动,体验效果差)
    model: 0
});
相关插件-动画效果,拖和放

超酷炫的HTML5页面飘落蒲公英动画

别人都飘雪,咱们开始飘蒲公英啦!
  动画效果
 13537  210

导航水波纹点击效果外加滑动效果

导航水波纹点击效果外加滑动效果
  动画效果
 12802  98

苹果滑动解锁动画效果

苹果滑动解锁动画效果slide-to-unlock
  动画效果
 18822  12

css3河流时间轴效果

不依赖任何框架,纯css3写成,简单,实用
  动画效果
 4944  16

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    黑白熊 0
    2018/1/2 16:04:49
    依秋无泪 0
    2017/10/25 1:49:08

    移动端的演示地址 :  http://bm.huangxiaoyong.com/3D/3D-zepto.html

    PC端的演示地址   :  http://bm.huangxiaoyong.com/3D/3D-jquery.html 

        依秋无泪0
        2017/10/25 2:07:59

        可以在以上地址查看演示 , 已解决已知的bug

        依秋无泪0
        2017/10/25 2:15:14

        移动端的演示效果比PC端好很多 , 因为这个插件一开始基于Zepto写的, 后来兼容了JQuery ,一些小细节没处理好 ,  所以PC端还有一些小问题 ,后期会修复

        依秋无泪0
        2017/10/25 15:05:12

        已修复PC端JQuery 的相关bug , 效果等同于移动端的Zepto

        X.0
        2018/3/24 18:37:38
        您好,这个插件我用在移动端, android正常。ios卡顿是为什么呢?
    回复
取消回复