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

最新推荐文章于 2021-11-21 12:53:33 发布

冰雪为融

最新推荐文章于 2021-11-21 12:53:33 发布

阅读量301

点赞数

分类专栏：我的js库

本文链接：https://blog.csdn.net/lhjuejiang/article/details/80875040

版权

我的js库专栏收录该内容

14 篇文章 1 订阅

订阅专栏

实现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);

冰雪为融

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D翻转效果的实现函数封装

实现3D翻转的效果：使用TweenMax库的方法（使用之前要先引入jQuery和TweenMax哦）参数说明：obj:是要翻转的两个面的父级，element1是正面，element2是背面，d是翻转的时间var donna = {} donna.button3D = function(obj,element1,element2,d){ var button3DAnimate...
复制链接

扫一扫