<!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. Oracle 闪回区满解决的方法

    闪回区满: OS: rm -rf [archivelog  autobackup  backupset  controlfile  flashback  onlinelog] eg : archive ...

  2. Weka算法Classifier-meta-AdaBoostM1源代码分析（一）

    多分类器组合算法简单的来讲经常使用的有voting,bagging和boosting,当中就效果来说Boosting略占优势,而AdaBoostM1算法又相当于Boosting算法的"经典款 ...

  3. 初探C++运算符重载学习笔记&lt;2&gt; 重载为友元函数

    初探C++运算符重载学习笔记 在上面那篇博客中,写了将运算符重载为普通函数或类的成员函数这两种情况. 以下的两种情况发生.则我们须要将运算符重载为类的友元函数 <1>成员函数不能满足要求 ...

  4. MongoDB 开机自启动

    MongoDB安装了以后,应当设置开机自启动. 假设启动命令如下: sudo /db/mongodb/265/bin/mongod --config /db/conf/mongodb/mongodb. ...

  5. DeepDive is a system to extract value from dark data.

    DeepDive is a system to extract value from dark data. http://deepdive.stanford.edu/

  6. changing permissions of Read-only file system in linux

      up vote 2 down vote favorite 1 i use this command to make a bootable flash disk of linux mint sudo ...

  7. 【Codeforces】 Round #374 (Div. 2)

    Position:http://codeforces.com/contest/721 我的情况 开始还是rank1,秒出C.(11:00机房都走光了,我ma到11:05才走,只打了一个小时) 结果.. ...

  8. java—容器学习笔记

    一:迭代器 刚开始学容器,做了个简单的练习题.. import java.util.ArrayList; import java.util.Collection; import java.util.I ...

  9. [Swift通天遁地]四、网络和线程-(10)处理图片：压缩、缩放、圆角、CoreImage滤镜、缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. 如何自学编程，零基础适合学习Java或者Web前端吗，非科班的能学java吗？

    很多人都会选择自学Java或者前端,相信有在校的大学生,有正在上班想转行的,也有已经在自学的.下面通过几个问题我来给大家分析学习编程的难易程度. 编程是什么? 通俗的理解,编程就是编写程序,哪什么是程 ...