3D旋转特效(touchrotate)

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

 32986  375  查看评论 (9)
分享到微信朋友圈
X
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
});
相关插件-动画效果,拖和放

Google loading 纯CSS3加载动画特效(部分原创)

Google风格为主题,运用CSS3实现加载动画特效
  动画效果
 29902  375

bezie curve 曲线动画

bezie curve 曲线动画
  动画效果
 33646  417

卷轴动画-html5+js完美兼容IE6+

卷轴动画-html5+js完美兼容IE6+
  动画效果
 50586  476

jquery3d图片旋转插件

拖动鼠标即可看到图片旋3D转动画
  动画效果
 44029  420

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    childe 0
    2021/3/18 16:47:21
    WckY 0
    2019/1/10 10:51:59
    我有一个想法 矩形目前作者已经实现了 但如果是球体呢 就不仅仅是六个面了 想实现球体的3D 还配合这些事件 难度就好大啊 回复
    三丫头 0
    2018/8/8 17:21:13
    长方体怎么弄啊, 回复
    黑白熊 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卡顿是为什么呢?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复