<!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. WPF学习笔记：获取ListBox的选中项

    有代码有J8: UI <UserControl x:Class="UnitViews.UserListUV" xmlns="http://schemas.micro ...

  2. HDU 4771 Stealing Harry Potter's Precious dfs+bfs

    Stealing Harry Potter's Precious Problem Description Harry Potter has some precious. For example, hi ...

  3. java Map 转 List

    public static void testMapVoid () { Map map = new HashMap(); map.put("a", "a1"); ...

  4. Unable to update auto-refresh reference 'microsoft.codedom.providers.dotnetcompilerplatform.dll'.

    Unable to update auto-refresh reference 'microsoft.codedom.providers.dotnetcompilerplatform.dll'. Ca ...

  5. 64. Extjs中grid 的ColumnModel 属性配置

    转自:https://blog.csdn.net/u011530389/article/details/45821945 本文导读:Ext.grid.ColumnModel 该类用于定义表格的列模型, ...

  6. 虚拟化技术概要之VMM结构

    1. 概述 当前主流的 VMM (Virtual Machine Monitor) 实现结构可以分为三类: 宿主模型 (OS-hosted VMMs)Hypervisor 模型 (Hypervisor ...

  7. A. Power Consumption Calculation

    http://codeforces.com/problemset/problem/10/A 题很简单,就是题意难懂啊... #include <stdio.h> #include < ...

  8. POI上传Excel的小问题处理

    package com.platform.utils.excel; import com.platform.utils.RRException; import org.springframework. ...

  9. JavaScript入门三

    *********BOM和DOM******** JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 Java ...

  10. 【USACO2009 Open】滑雪课程ski

    [USACO2009 Open]滑雪课程 Ski Lessons Time Limit: 1000 ms Memory Limit: 131072 KBytes Description 约翰请贝西去科 ...