这是一款可以快速制作卡片翻转效果的jquery插件。用户可以不了解CSS3语法，就可以通过该插件制作出炫酷的卡片翻转效果。
安装
可以通过npm或bower来安装jquery.flip.js卡片翻转插件。
npm install nnattawat/flip
bower install flip
使用方法
在页面中引入jquery和jquery.flip.js文件。
<script src="path/to/jquery.js"></script>
<script src="path/tojquery.flip.js"></script>
HTML结构
一张要进行3D翻转的卡片的基本HTML结构如下：
<div id="card">
<div class="front">
卡片正面内容
</div>
<div class="back">
卡片反面内容
</div>
</div>
初始化插件
在页面DOM元素加载完毕之后，可以通过flip()方法来对插件进行初始化。
$(function($) {
$("#card").flip();
});
配置参数
jquery.flip.js卡片翻转插件的可用配置参数如下：
| 参数 | 可选值 | 默认值 | 描述 |
| axis | 'y', 'x' | 'y' | 卡片翻转的中心轴。 |
| trigger | 'click', 'hover', 'manual' | 'click' | 触发卡片翻转的事件。 |
| reverse | true, false | false | 是否反向翻转卡片。 |
| speed | 任意整数 | 500 | 卡片翻转的持续时间，数值越大翻转得越慢。 |
| front | jquery选择器或jquery对象 | '.front' | 卡片的正面。 |
| back | jquery选择器或jquery对象 | '.back' | 卡片的反面。 |
| autoSize | true, false | true | 卡片是否自动适应它的容器的尺寸。 |
| forceWidth | true, false | false | 是否强制卡片的宽度适应它的父容器的宽度。 |
| forceHeight | true, false | false | 是否强制卡片的高度适应它的父容器的高度。 |
关于jquery.flip.js卡片翻转插件的更多信息可以参考：https://github.com/nnattawat/flip
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/jquery-tools/201709114733.html
上一篇：检测浏览器版本提示升级js插件
