演示部分截图
资源描述
jQuery+CSS3实现卡片自动翻牌特效:
这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backface-visibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
html部分:
该卡片自动翻转效果的HTML结构如下:front为卡片的正面,back为卡片的反面。
<div class="card" style="height: 165px;"> <div class="face front"> <a href="#"> <img src="picture/1.png"> </a> </div> <div class="face back cardAK"> <img src="picture/2.png"> </a> </div> </div> <div class="circle" id="circles-1"></div>
css样式:
在css样式中,通过CSS3的perspective属性设置3D透视效果,并通过backface-visibility为卡片添加正反面能力。然后通过rotate3d函数来对卡片进行翻转。
.contaier{width: 640px; margin: 30px auto;} .card { perspective: 1000; -webkit-perspective: 1000; width: 100%; margin-bottom: 3px; } .face{ position: absolute; border-radius:5px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; background-color: rgb(178, 39, 49); } .front { z-index: 10; } .back{ transform:rotate3d(0,1,0,-180deg); -ms-transform:rotate3d(0,1,0,-180deg); /* IE 9 */ -moz-transform:rotate3d(0,1,0,-180deg); /* Firefox */ -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */ -o-transform:rotateY(0,1,0,-180deg); /* Opera */ z-index: 8; } .card-flipped .front{ transform:rotate3d(0,1,0,180deg); -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */ -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */ -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */ -o-transform:rotate3d(0,1,0,180deg); /* Opera */ z-index: 8; } .card-flipped .back{ transform:rotate3d(0,1,0,0deg); -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */ -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */ -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */ -o-transform:rotate3d(0,1,0,0deg); /* Opera */ z-index: 10; }
js初始化插件:
该卡片翻转特效使用jQuery代码来翻转卡片,代码非常简单,通过一个定时器来定时切换相应卡片的class类,实现卡片的翻转效果。
$(function () { flip(); }); function flip() { var timer = null; var i = 0; var j = 0; var aFlip = $(".card"); function flipFn(arg1, arg2) { aFlip.eq(i).toggleClass('card-flipped'); i++; if(i==5){ i=0; } } timer = setInterval(flipFn, 2000); }
转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/870.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意