<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>matrix</title>

    </head>

    <style>

        html,

        body {

            height: 100%;

            margin: 0;

            overflow: hidden;

        }

        body {

            color: white;

            font-family: sans-serif;

            font-size: 1.8em;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .content {

            margin: 1px;

            width: 140px;

            height: 140px;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

            transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);

        }

    </style>

    <body>

        <div class="wowpanel">

            <div class="content">move</div>

        </div>

        <div class="wowpanel">

            <div class="content">your</div>

        </div>

        <div class="wowpanel">

            <div class="content">cursor</div>

        </div>

        <div class="wowpanel">

            <div class="content">over</div>

        </div>

    </body>

</html>

<script>

    let angle = 45;

    let wowpanels = document.querySelectorAll(".wowpanel");

    let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];

    wowpanels.forEach(function(element,i){

        maxtridFun(element, colors[i]);

    });

    function maxtridFun(panel, color) {

        let content = panel.querySelector(".content");

        content.style.backgroundColor = color;

        panel.addEventListener('mouseout',function(e){

            content.style.transform = `perspective(300px)

                                   rotateY(0deg)

                                   rotateX(0deg)`;

        });

        panel.addEventListener('mousemove', function(e){

            let w = panel.clientWidth,

                h = panel.clientHeight,

                y = (e.offsetX - w * 0.5) / w * angle,

                x = (1 - (e.offsetY - h * 0.5)) / h * angle;

            content.style.transform = `perspective(300px)

                                   rotateX(${x}deg)

                                   rotateY(${y}deg)`;

        });

    }

</script>

maxtrid 3D视差的更多相关文章

  1. Amazing！巧用 CSS 视差实现酷炫交互动效

    本文将介绍利用 CSS 实现滚动视差效果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效. 关于使用 CSS 实现滚动视差效果,在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果, ...

  2. Android开源项目库汇总

    最近做了一个Android开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. 抽 ...

  3. GitHub上受欢迎的Android UI Library

    GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 Vi ...

  4. Android UI相关开源项目库汇总

    最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...

  5. CSS3、SVG、Canvas、WebGL动画精选整理

    一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq ...

  6. GitHub 上受欢迎的 Android UI Library 整理（一）

    抽屉菜单 https://github.com/mikepenz/MaterialDrawer ★7337 - 安卓抽屉效果实现方案https://github.com/Yalantis/Side-M ...

  7. 最新最全的 Android 开源项目合集

    原文链接:https://github.com/opendigg/awesome-github-android-ui 在 Github 上做了一个很新的 Android 开发相关开源项目汇总,涉及到 ...

  8. Computer Vision_18_Image Stitching： Image Alignment and Stitching A Tutorial——2006（book）

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  9. Computer Vision_18_Image Stitching： Image Alignment and Stitching——2006

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

随机推荐

  1. Spring MVC JSON自己定义类型转换（续）

    前面提到了两种转换类型的方法(Spring MVC JSON自己定义类型转换),这里针对Json转换提供一种更简便的方法. 通过配置全局的日期转换来避免使用麻烦的注解. 首先用到了一个简单的日期工具类 ...

  2. ObjectiveC开发教程--字符串的连接

    NSString *type = @"hello"; NSString *subtype = @"good"; NSString *typesub = [NSS ...

  3. 进销存管理系统， 刚学C++

    各位大神们.有什么补充的能够评论一下吗? #include<iostream> #include<string> using namespace std; int G=0;// ...

  4. Android TP（三）【转】

    本文转载自:http://blog.csdn.net/bi511304183/article/details/9303259 平台信息:内核:linux2.6/linux3.0系统:android/a ...

  5. 动态DNS——本质上是IP变化，将任意变换的IP地址绑定给一个固定的二级域名。不管这个线路的IP地址怎样变化，因特网用户还是可以使用这个固定的域名 这样看的话，p2p可以用哇

    动态域名是因应网络远程访问的需要而产生的一项应用技术.因为没有固定IP,只能运用二级域名来应对经常变化的IP,动态域名的由来因此而产生. 它当前主要应用在:路由器.网络摄像机.带网络监控的硬盘录像机. ...

  6. P3258 [JLOI2014]松鼠的新家 树链剖分

    这个题就是一道树剖板子题,就是每走一步就把所有的经过点加一就行了.还有,我的树剖板子没问题!!!谁知道为什么板子T3个点!我不管了!反正这道题正常写A了. 题干: 题目描述 松鼠的新家是一棵树,前几天 ...

  7. 洛谷P2303 [SDOi2012]Longge的问题

    题目背景 SDOi2012 题目描述 Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). ...

  8. 如何用css约束一个层不可见

    两种方式: 方式一:设置属性值为none不可见:display:none 这个属性改变了一个元素的显示效果.之前我有提到一点,假如元素使用了none值,那么元素直接干净利落的消失不见.你在右键审查元素 ...

  9. Spark SQL中 RDD 转换到 DataFrame

    1.people.txtsoyo8, 35小周, 30小华, 19soyo,882./** * Created by soyo on 17-10-10. * 利用反射机制推断RDD模式 */impor ...

  10. PCB SQL Server 代码创建DbLink

    代码如下: ) ) ) ) ) SET @serverName = 'DbLinkName' --db链接名 SET @ip = '120.79.36.65' --需连接服务器的IP SET @dbN ...