概述

之前觉得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. Linux screenshot

    一.简介 linux下的三个截图软件

  2. 直接插入排序（js版）

    直接插入排序(从小到大) 基本思想:将一个记录插入到已经排好序的有序表中,得到一个新的,记录数加1的有序表. function insertSort(arr){ var i,j,temp=0; for ...

  3. SQL Server数据库的兼容级别

    SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行M ...

  4. 涂色(CQOI2007)

    --BZOJ1260_区间dp Description 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字符串表示这个目标:R ...

  5. 那一夜，风雪交加，我在搞jquery------专题之jquery选择器

    我们今天探讨下Jquery的用法,主要是研究选择器. 选择器可以分成四类: 1.基本选择器 核心代码: <script type="text/javascript"> ...

  6. Spring Boot 启动（二） 配置详解

    Spring Boot 启动(二) 配置详解 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring Boot 配置 ...

  7. http://www.cnblogs.com/langjt/p/4281477.html

    http://www.cnblogs.com/langjt/p/4281477.html

  8. CentOS 7 下安装oracle 11g碰到的一些问题

    OUI预检查时会报错,安装时会报两个不符合项目 1 compat-libstdc++ 提示未安装 奇怪这个,yum install compat-libstdc++ 老是提示找不到包,其实正确的安装方 ...

  9. centos7安装配置nfs

    操作系统版本:3.10.0-123.el7.x86_64 192.168.137.11  nfs服务端 192.168.137.10  nfs客户端 一.安装nfs服务端(在192.168.137.1 ...

  10. mysql5.7安装记录

    mysql安装记录 版本5.7 windows系统 一.缺少my.ini文件 [mysql]# 设置mysql客户端默认字符集default-character-set=utf8 [mysqld]#设 ...