简要教程
这是一款简单实用的jquery和css3卡片自动翻牌特效。该卡片翻转效果使用css3透视和backface-visibility属性来制作卡片正反面效果，并使用jquery使其自动旋转起来。
查看演示       下载插件
使用方法
html结构
该卡片自动翻转效果的html结构如下：front为卡片的正面，back为卡片的反面。

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之家