这是一款jQuery 3D立方体翻转插件。该插件可以创建水平或垂直的3d立方体效果,可以控制立方体的翻转速度,定义触发立方体旋转的事件等。

使用方法

在页面中引入jquery和jquery.flipbox.js、jquery.flipbox.css文件。

HTML

使用下面的结构创建一个3D翻转元素。

1
2
3
4
5
6
7
8

...

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery 3D立方体翻转插件。

$(function(){

$('#example').flipbox();

});

配置参数

该jquery 3D立方体翻转插件的可用配置参数有:

vertical:翻转的方向,默认为false,表示水平翻转。

width:翻转元素的宽度,单位像素。

height::翻转元素的高度,单位像素。

index:初始化显示的面,默认为0。

animationDuration:翻转动画的持续时间,单位毫秒,默认为400。

animationEasing:翻转动画的easing函数,默认为ease。

autoplay:是否自动翻转,默认为false。

autoplayReverse:是否能无限循环,默认为false。

autoplayWaitDuration:自动翻转的等待时间,单位毫秒,默认为3000。

autoplayPauseOnHover:是否在鼠标hover时,暂停自动翻转。

html立方体翻转,jQuery 3D立方体翻转插件相关推荐

  1. jquery 3D分页翻转滑块

    jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效. 转载于:h ...

  2. python 3d绘图立方体_python绘制3D立方体

    我想绘制一个平行六面体.其实我从python脚本开始画立方体为:python绘制3D立方体 import numpy as np from mpl_toolkits.mplot3d import Ax ...

  3. linux桌面立方体,为Ubuntu 3D立方体每个桌面显示配置不同壁纸的方法[图文]

    Ubuntu中Compiz的3D立方体桌面的确很绚很酷,但3D立方体的不同桌面设置不同壁纸总是搞不好. 无论本人在compiz configure里怎样设置.每个桌面显示总是一样的壁纸. 经过一段时间 ...

  4. java3D实现空间立方体_CSS3打造3D立方体

    前言:今天用css3实现正方体.通过此案例,可以对css3在实现3D效果方面的属性有一定了解. 案例效果 HTML分析 最外层的.container触发3d效果,#cube保留父元素的3d空间同时包裹 ...

  5. css3滚动倾斜,jQuery 3D倾斜滚动页面效果

    tiltedpage-scroll是一款十分美妙的jQuery 3D倾斜图片插件.使用这个插件你可以做成一个很漂亮的3d倾斜图片滚动效果. HTML结构 ... ... ... ... 调用方法 首先 ...

  6. jQuery实现3D立方体翻转插件

    下载地址https://yy123.ink/frontDetail/8156一款jQuery实现的3D立方体翻转插件.该插件可以创建水平或垂直的3d立方体效果,可以控制立方体的翻转速度,定义触发立方体 ...

  7. 7个神奇的jQuery 3D插件

    7个神奇的jquery 3D插件,让你可以实现一些媲美Flash的动画特效. 1. Flip HTML content in 3D 用jQuery实现的3D翻转效果,支持html内容的翻转. 2. A ...

  8. html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效

    在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...

  9. 1.Web前端之CSS3中3D立方体以及3D轮播图

    1.3D坐标系 3D坐标可以用左手来模拟,其中大拇指方向默认是X轴正方向,食指方向是Y轴正方向,中指方向是Z轴正方向.注意:当设置transform:rotateX(90deg)时,相当于将X轴转动9 ...

最新文章

  1. 初学Java Web(1)——Web概述
  2. 2020-11-24(Windows保护模式学习笔记(1)—— 段寄存器与段权限检查)
  3. 2019年总结:把能努力的都努力好,最终等待命运垂青
  4. Java技术学习心得
  5. TensorFlow实现卷积、池化操作
  6. 普通软件项目开发过程规范(五)—— 总结
  7. AndEngine 动态更新Text文本内容时报ArrayIndexOutOfBoundsException错误的解决
  8. telephone 为空 唯一索引_数据库基础及应用试题题库
  9. 我的世界java版启动器更新_我的世界:统一启动器发布、java版更新1.16.5,本周mc新闻大事件...
  10. 会议论文集出版地总结_codestorm_新浪博客
  11. SDU程序设计思维Week15-作业 字符串
  12. 主机电源供电端口-24PIN
  13. java自定义封装一个方法_Java自定义套件封装教程
  14. c++用贪心算法解决汽车加油问题
  15. Activiti7工作流介绍及使用
  16. Postgresql数组操作符及数组函数
  17. Long类型数据比较
  18. 如何解决Mac电脑浏览器网页自动放大的问题?
  19. 会议平板红外和电容触控区别,哪个好?
  20. Docker Swarm 创建加密覆盖网络

热门文章

  1. 面试python的理解_面试宝典:深入理解这110道python面试题,AI和大数据向你招手,下...
  2. java替换图片内容
  3. Linux服务器上Tomcat配置SSL证书并自动续期
  4. $.extend()用法
  5. LeetCode 961.重复 N 次的元素
  6. 最有利百度收录的博客排行榜
  7. 微博、博客、qq(IM)区别与联系
  8. 结构体枚举联合详解(附例题解析)
  9. openEuler 操作系统安装及配置网络
  10. 制作Windows10镜像的ISO