<!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. Office 如何打印A4不干胶标签纸

    1 下载Label Expert这个软件,注意不是第一个Avery Wizard(卖家可能会送你这个软件,但是送的这款软件是简体中文版的,似乎模板不全,所以最好还是自己下,反正我最后是由于找不到对应的 ...

  2. 从头认识java-15.1 填充容器（1）-利用Collection构造器的方式

    这一章节我们来介绍一下填充容器. 就像数组一样,Arrays.fill是填充方法,在容器里面也有. 1.Collections.nCopies 这种方法是生成某种类型多少个对象,然后我们能够把他放到容 ...

  3. 在Tomcat服务器中去端口访问域名

    在刚购买域名并解析后,从外网访问Tomcat服务器时是需要在域名后面加端口":8080".要去端口访问的步骤如下: 在Tomcat目录下的conf文件夹下,打开server.xml ...

  4. POJ 1861 Network (Kruskal求MST模板题)

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 14103   Accepted: 5528   Specia ...

  5. LeetCode 648. Replace Words (单词替换)

    题目标签:HashMap 题目给了我们一个array 的 root, 让我们把sentence 里面得每一个word 去掉它得 successor. 把每一个root 存入hash set,然后遍历s ...

  6. Linux系统centos7+VMwareWorkstation创建共享文件夹错误解决方法集锦

    在创建共享文件夹过程中出现了多种错误,多次尝试后终于解决了. 1.直接找到VMware Tools压缩包的位置:/run/media/wxy/VMware\ Tools /**省去了创建光盘挂载点:m ...

  7. 如何在 webpack 项目中使用绝对路径

    react 小白编程 本项目是使用 create-react-app 脚手架构建的react项目 找到 config 配置文件下的 webpack.config.dev.js 和 webpack.co ...

  8. HDU 5289 Assignment （二分+区间最值）

    [题目链接]click here~~ [题目大意]: 给出一个数列,问当中存在多少连续子序列,子序列的最大值-最小值<k [思路]:枚举数列左端点.然后二分枚举右端点,用ST算法求区间最值.(或 ...

  9. cgi程序读取post发送的特殊字符，尤其适合于微信公众平台开发中发送被动消息

    [问题]用c编写cgi程序怎样取出html表单post来的数据? [分析]html表单post来的数据形如username="zhang"&&password=&q ...

  10. 3301 Square words

    3301 Square words  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 定义s ...