<!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. hdu 4193 单调队列

    题意是给你n个数   组成的环   求以一个数开头 的数列全部前缀都为非负数的数列的个数: 思路:  先扩展成2*n的数列 然后求出sum[i]表示前i项的和     对每一个i>.=n结尾的数 ...

  2. scikit-learn：4.7. Pairwise metrics, Affinities and Kernels

    參考:http://scikit-learn.org/stable/modules/metrics.html The sklearn.metrics.pairwise submodule implem ...

  3. 【OI】向量&矩阵乘法

    何为向量? 在初中课本中,我们知道: 向量是有大小和方向的量. 这样解释太笼统了,现在我们只讨论平面上的向量. 那么,我们约定:在平面上的向量,由一个二元组组成:如α(c1,c2). 在此平面上建立一 ...

  4. Codeforces Round #313 A. Currency System in Geraldion(简单题)

    A. Currency System in Geraldion time limit per test 2 seconds memory limit per test 256 megabytes in ...

  5. 51nod 1642 区间欧拉函数 && codeforce594D REQ

    画一下柿子就知道是求区间乘积乘区间内所有质因数的(p-1)/p(就是求欧拉的公式嘛) 看上去莫队就很靠谱然而时间O(nsqrt(n)logn)并不资瓷 还是离线,确定右端点,对于1~i的区间内的质因数 ...

  6. string转date

    /*util-->sql*/ java.util.Date utdt; java.sql.Date sqldt =null; SimpleDateFormat simFormat = new S ...

  7. [SCOI 2010] 连续攻击游戏

    [题目链接] https://www.luogu.org/problemnew/show/P1640 [算法] 二分图匹配 实现时需要常数优化和特判 [代码] //code by byf and lm ...

  8. Spark SQL中 RDD 转换到 DataFrame

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

  9. C语言内存管理总结

    更新: 2018/01/09 增加free() 更新: 2018/04/13 修改部分文字与表格背景色与默认颜色相同 //# TODO: malloc, alloc, calloc, realloc ...

  10. bzoj4563: [Haoi2016]放棋子(错排+高精)

    4563: [Haoi2016]放棋子 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 387  Solved: 247[Submit][Status] ...