转载

简单实用的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; }

初始化插件

该卡片翻转特效使用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); }

来源jQuery之家

正文到此结束