3D翻转效果的实现函数封装

实现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代码：

    
    
    
    
    



    

        
one
        
two
    

js代码就很简单了：

donna.button3D("#box3D",".one",".two",0.5);