jQuery CSS3 3D旋转盒子动画可自定义封面图片

jQuery CSS3 3D旋转盒子动画可自定义封面图片

一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的每一个面,另外,3D盒子的面都可以自定义封面图片,你可以为每一个面选择不同的图片,并还可以自定义盒子的尺寸大小。

使用方法
在页面引入jquery-1.11.3.min.js、vue.min.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="jquery-1.11.3.min.js"></script>
<script src="vue.min.js"></script>
$('.box').touchrotate({
    //初始3D旋转
    rotateX: -15,
    rotateY: 15,
    //数值越小 , 旋转速度越快
    speedX: 2,
    speedY: 2,
    // 旋转的倍数, 越大旋转的圈数越多
    multipleX: 50,
    multipleY: 50,
    // 动画持续的时间, 单位是S
    time: 2,
    //模式 0:表示匀速运动 , 运动中途可以重新开始 , 1表示先加速后减速(动画过程中不可滑动,体验效果差)
    model: 0
});

文件信息:

    0

    发表评论