投稿 搜索

热门文章

当前位置: 站长天下 / 图片相册背景 / jQuery CSS3 3D旋转盒子动画可自定义封面图片
jQuery CSS3 3D旋转盒子动画可自定义封面图片
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-22
    阅读:

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

简要教程

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

使用方法

在页面引入jquery-1.11.3.min.js、vue.min.js文件

<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
});