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

￡神魔★判官ぃ 2022-05-21 05:55 214阅读 0赞

实现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 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关【3D旋转相册效果实现】

最终效果图展示: ![在这里插入图片描述][20190929222316567.gif] HTML部分 1.首先在html中写上名为 perspective 的di

缺乏、安全感/ 2023年08月17日 16:55/ 0 赞/ 143 阅读

相关 swiper-翻页效果---3D翻转效果

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

妖狐艹你老母/ 2022年09月23日 04:00/ 0 赞/ 650 阅读

相关 jQuery实现3D立方体翻转插件

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220829/bbec8554669d4d3

深藏阁楼爱情的钟/ 2022年09月11日 00:27/ 0 赞/ 170 阅读

相关 css3 按钮翻转效果

css3 按钮翻转效果 ![css3 按钮翻转][css3] ![css3 按钮翻转][css3 1] ![css3 按钮翻转][css3 2] html

末蓝、/ 2022年09月03日 07:19/ 0 赞/ 257 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 304 阅读

相关 3D翻转动画

大致效果 ![这里写图片描述][70] ![这里写图片描述][70 1] ![这里写图片描述][70 2] -------------------- （1）. 搭框

素颜马尾好姑娘i/ 2022年05月30日 11:08/ 0 赞/ 279 阅读

相关简单CSS3+JQ实现图片的3D翻转

我的博客已经全部迁移至新地址，欢迎收藏我的[个人博客][Link 1]。推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 没想到刚开始没两天就突然断

川长思鸟来/ 2022年05月24日 20:36/ 0 赞/ 257 阅读

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

实现3D翻转的效果：使用TweenMax库的方法（使用之前要先引入jQuery和TweenMax哦）参数说明：obj:是要翻转的两个面的父级，element1是正面，e

￡神魔★判官ぃ/ 2022年05月21日 05:55/ 0 赞/ 215 阅读

相关 css3 实现正反面翻转效果动画

分享一下正反面的翻转的动画效果的实现，使用了css3的一些属性；在目前的移动端中使用还是可以的，但是pc端需要注意IE的兼容问题；下面翻转了一个<p/>元素，没有使用图

淡淡的烟草味﹌/ 2022年03月14日 08:20/ 0 赞/ 962 阅读

相关 css实现3D立体视频翻转动画

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一世哀愁。/ 2021年07月26日 15:35/ 0 赞/ 488 阅读