一、主要原理

• 一个卡片位置，使用两个div区域，标识一个前面，一个背面，使用相应的绝对定位，结合一定隐藏属性与transform的空间旋转特性，把背面隐藏起来；
• 通过给每一个卡片，定时添加额外的翻牌class,来达到不同的效果。

二、掌握的知识点

• css3的transition动画属性使用，z-index的空间层，来显示一个前一个后。
• css3的transform:rotate3d(0,1,0,-180deg);与transform:rotate3d(0,1,0,180deg);与transform:rotate3d(0,1,0,0deg);使用，达到翻转的效果。

三、使用方法

1） Html结构

<div class="card">
    <div class="face front">
        <!--能自定义内容，不限于文本，图片等各种html元素-->
        <div class="t1">--关注精益编程--</div>
    </div>
    <div class="face back">
        <a href="https://www.leanboot.com" target="_blank" title="精益编程"><img src="./static/n1.jpg" /></a>
    </div>
</div>

• 定义card的卡片内容区域，能根据实际情况，给card固定的长宽样式
• .face定义两个区域，使用front与back定义前面背面区域
• 两个区域都能灵活定义html元素

2）style样式

• 请详细查看resource.css中的：插件本身样式

3）js代码

function flip() {
    var i = 0;
    var cardFlip = $(".card");
    var timer = setInterval(function(){
        cardFlip.eq(i).toggleClass('card-flipped'); 
        i++;
        if(i == cardFlip.length){
            i=0;
        }
    }, 2000);//2s翻动一次牌子
}

• 主要运用了js中的循环定时setInterval()函数，进行定时调用
• jquery的数组.eq()来绑定特定元素，并使用toggleClass()切换class的添加与移除

jquery还是挺好用的，用于动态网页或者纯静态网页中，是一个不错的选择，毕竟针对这些公网站点来说，还是依赖seo生存的，所以并不是现在的超多前后端分离的就是好，任何一种的成熟的框架的选择，都有弊与利，需要结合应用场景来选择！精益资源每一个源码都是经过考验与整理，请放心使用