Flip是一个能够让任意HTML、文本或jQuery Element产生漂亮翻转效果的jQuery插件。
可以配置翻转方向：从右到左、上到下或从左到右、下到上。翻转的速度也可以配置。
效果如下图所示：
官网：http://lab.smashup.it/flip/ （貌似被墙了，需要....一下）
兼容性：Firefox, Chrome/Chromium, Opera, Safari and even IE 6+
需要的js文件：jQuery、 jQueryUI core、jQueryUI effects core、flip
Demo
需要的js文件（测试发现，没有jquery.ui.core.min.js，貌似也可以）。
<script type="text/javascript" src="js/jquery8.js"></script> <script type="text/javascript" src="js/jquery.ui.core.min.js"></script> <script type="text/javascript" src="js/jquery.ui.effect.min.js"></script> <script type="text/javascript" src="js/jquery.flip.min.js"></script>
html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>index</title> <script type="text/javascript" src="js/jquery8.js"></script> <script type="text/javascript" src="js/jquery.ui.core.min.js"></script> <script type="text/javascript" src="js/jquery.ui.effect.min.js"></script> <script type="text/javascript" src="js/jquery.flip.min.js"></script> <style type="text/css" > #demo1 { height: 200px; width: 200px; line-height:200px; margin: 50px auto; background: red; text-align: center; color: #ddd; font-weight: bold; } </style> <script type="text/javascript"> $(function() { $("#demo1").click(function() { var $this=$(this); $(this).flip({ direction : 'lr', color : "red", speed:500, onBefore : function() { console.info('在开始动画之前'); }, onAnimation : function() { console.info('在动画中间'); }, onEnd : function() { $this.revertFlip(); } }); }); }); </script> </head> <body> <div id="demo1"> 翻滚吧！ </div> </body> </html>
本示例文件：http://url.cn/TU9Q6T 或 http://share.weiyun.com/559ac93738a915c36ef67e94f65a3e37
最简单的调用方法就是： $(selector).flip({}); 既可以实现效果。
如果有更加复杂的要求，有下面几个参数可以调用：
content
定义翻转后元素的新内容，可以是：文本 、 HTML 或 jQuery 对象
direction
定义元素翻转的方向，可选：
tb/bt/lr/rl，默认为 tbcolor
定义元素翻转后的背景颜色，默认是 #999999
speed
定义翻转的速度，默认为 500 毫秒
onBefore
定义元素翻转之前的回调函数
onAnimation
定义元素翻转到一半时的回调函数
onEnd
定义元素翻转之后的回调函数
经典案例：http://www.siteserver.cn/case/
参考：http://www.camnpr.com/archives/jquery-flip-360-degree-flip-jquery-slicebox-3d-effect.html