概述

之前觉得2个效果很叼，一个是3D翻转效果，另一个是视差效果。今天好好的研究一下，把心得记录下来，供以后开发时参考，相信对其他人也有用。

3D翻转

3D翻转效果其实非常简单，其实就是perspective属性的一个运用。perspective属性就是视距的意思。下面是一个鼠标放上去图片就会翻转的小示例，看看就会了：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  div {

    margin: 200px 0 0 200px;

    width: 200px;

    height: 200px;

  }

  i {

    display: block;

    width: 100%;

    height: 100%;

    box-shadow: 10px 10px 150px #5fbdff;

    transition: all 2s;

    -webkit-transform: perspective(800px);

    -ms-transform: perspective(800px);

    -o-transform: perspective(800px);

    transform: perspective(800px);

  }

  div:hover i {

    -webkit-transform: perspective(800px) rotateY(180deg);

    -ms-transform: perspective(800px) rotateY(180deg);

    -o-transform: perspective(800px) rotateY(180deg);

    transform: perspective(800px) rotateY(180deg);

  }

  </style>

</head>

<body>

  <div>

    <i></i>

  </div>

</body>

</html>

这里有一个更加好看的开门效果例子。

视差效果

所谓的视差效果，就是在鼠标或滚轮进行移动的时候，多层次的背景进行不同程度的变换（有的是位移，有的是翻转等）。

这里有一个鼠标位移进行翻转视差的例子，主要是监听鼠标进入元素并移动的事件，检查鼠标在元素内部的位置，从而进行不同程度的翻转。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <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>

</head>

<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>

  <script>

    const ANGLE = 45;

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

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

    wowpanels.forEach((element, i) => {

      floatable(element, colors[i]);

    });

    function floatable (panel, color) {

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

      content.style.backgroundColor = color;

      panel.addEventListener('mouseout', e => {

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

                       rotateX(0deg)

                       rotateY(0deg)

                       rotateZ(0deg)`;

      });

      panel.addEventListener('mousemove', e => {

        let w = panel.clientWidth;

        let h = panel.clientHeight;

        let y = (e.offsetX - w * 0.5) / w * ANGLE;

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

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

                       rotateX(${x}deg)

                       rotateY(${y}deg)`;

      });

    }

  </script>

</body>

</html>

类似地，我们也可以不用翻转，而是用位移。当鼠标向左移动的时候，图片向右移动；当鼠标向右移动的时候，图片向左移动；当鼠标向上移动的时候，图片向下移动等等，这样就能做出比较好看的位移视差效果了。

这里有2篇关于视差效果的文章，很有启发性：

视差滚动效果原理解析和效果实现

小tip: 纯CSS实现视差滚动效果

css中的视距perspective和视差效果的更多相关文章

  1. css中图片有缩放和转动效果

    现在html中利用div来包裹住一张图片. <div class="xuanzhuan"> <img src="images/top.png" ...

  2. 使用css中的flex布局弹性手风琴效果

    不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. HTML5中id可以用数字开头，但在css中不能正常使用

    昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...

  4. 纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

    很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

  5. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

  6. 用CSS3 & jQuery创建apple TV海报视差效果

    用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...

  7. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  8. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  9. 滚动视差效果——background-attachment

    滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景.内容.贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果.最近在做一个项目wiki的时 ...

随机推荐

  1. UVa156

    #include <bits/stdc++.h> using namespace std; map<string,int> cnt; vector<string> ...

  2. java学习（三）

    学号 20189214 <Java程序设计>第三周学习总结 教材学习内容总结 核心类 java.lang.Object 所有的类都直接派生自这个类. java.lang.String St ...

  3. UI设计之动画—从虚拟到现实

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 用户界面设计中的动画一直是这几年热议的话题,尤其活跃在概念动画领域.它为设计师提供创造性实验并推动UI动 ...

  4. pd16.5增加字段备注

    EXEC sp_addextendedproperty 'MS_Description', %.q:COLNNAME%, 'user', dbo, 'table', %TABLE%, 'column' ...

  5. net::ERR_CONNECTION_RESET 问题排查

    后台服务器代码有问题 实体不对称,导致映射不对

  6. vue生命周期-mounted和created的区别

    详情请查看:https://blog.csdn.net/xdnloveme/article/details/78035065 自己做个总结: beforeCreate 创建之前:已经完成了 初始化事件 ...

  7. rsync @ERROR: auth failed on module backup 解决思路及附录rsync常见问题及解决办法

    昨晚小版本上线,使用rsync往服务器上传文件时,client报如下异常: @ERROR: auth failed on module backup rsync error: error starti ...

  8. 【NIFI】 Apache NiFI 集群搭建

    NiFI 集群介绍 NiFi集群架构 NiFi采用Zero-Master Clustering范例.集群中的每个节点对数据执行相同的任务,但每个节点都在不同的数据集上运行.其中一个节点自动选择(通过A ...

  9. Sql Server免域，异地备份

    --先决条件 开启xp_cmdshellEXEC sp_configure 'show advanced options', 1;RECONFIGURE;EXEC sp_configure 'xp_c ...

  10. redis安装及生产采用的启动方式和常用连接客户端

    1. 下载 wget命令 wget http://download.redis.io/releases/redis-5.0.2.tar.gz 2. 解压与安装 解压 tar xzf redis-5.0 ...