实现3D翻转的效果：
使用TweenMax库的方法（使用之前要先引入jQuery和TweenMax哦）
参数说明：obj:是要翻转的两个面的父级，element1是正面，element2是背面，d是翻转的时间
var donna = {}
donna.button3D = function(obj,element1,element2,d){
var button3DAnimate = new TimelineMax();
button3DAnimate.to( $(obj).find(element1),0,{rotationX:0,transformPerspective:600,transformOrigin:"center bottom"} );
button3DAnimate.to( $(obj).find(element2),0,{rotationX:-90,transformPerspective:600,transformOrigin:"top center"} );
$(obj).bind("mouseenter",function(){
var enterAnimate = new TimelineMax();
var ele1 = $(this).find(element1);
var ele2 = $(this).find(element2);
enterAnimate.to(ele1,d,{rotationX:90,top:-ele1.height(),ease:Cubic.easeInOut},0);
enterAnimate.to(ele2,d,{rotationX:0,top:0,ease:Cubic.easeInOut},0);
});
$(obj).bind("mouseleave",function(){
var leaveAinimate = new TimelineMax();
var ele1 = $(this).find(element1);
var ele2 = $(this).find(element2);
leaveAinimate.to(ele1,d,{rotationX:0,top:0,ease:Cubic.easeInOut},0);
leaveAinimate.to(ele2,d,{rotationX:-90,top:ele2.height(),ease:Cubic.easeInOut},0);
});
}调用示例：
看HTML和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/src/jquery-1.8.3.js"></script>
<script src="js/src/TweenMax.js"></script>
<style>
body,ul,li{
margin:0; padding:0;
}
ul{list-style:none; position:relative;}
#wrap ul{ border:1px solid #000;
margin:50px auto;
width:200px; height:60px;
}
li{
width:200px; height:60px; line-height:60px; text-align:center; color:#fff; position:absolute;
}
.one{background:#e15671; }
.two{
background:#0e566c; top:60px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="box3D">
<li class="one">one</li>
<li class="two">two</li>
</ul>
</div>
</body>
</html>
js代码就很简单了：
donna.button3D("#box3D",".one",".two",0.5);