概述

之前觉得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. Win10系统，开机后提示Desktp不可用的故障解决方法。

    WIN10桌面位置不可用的故障解决方法 今天电脑开机 (Win10系统).桌面空了,然后就蒙了. 系统并弹出以下框,如下图: 原因可能是因为昨天晚上熬夜测试脚本.网上下载的脚本大多都是有毒的.但是人懒 ...

  2. win10+tensorflow+CUDA 心酸采坑之路

    最近准备学习机器学习和深度学习,所以入坑Tensorflow,之前一直使用的是Anaconda3的cpu版本的Tensorflow,但是这次作死一直想用GPU版本的,主要是不想浪费我的1080ti,但 ...

  3. 网址导航18A

    [导航] hao268 百度导航 泡泡导航 35Q网址导航 [名站] 百度 网易 腾讯 新华 中新 凤凰 [邮箱] 163邮箱 126邮箱 Yeah邮箱 QQ邮箱 阿里邮箱 189邮箱 [新闻] 联合 ...

  4. 使用struts2框架后的拦截器

    过滤特殊字符的过滤器 struts2会在web.xml中配置如下的过滤器: <filter> <filter-name>struts</filter-name> & ...

  5. vs2010单步调试崩溃

    vs2010在使用单步调试(F10,F11)功能时崩溃,如下图: 困扰了一段时间,度娘,google了很久也没有搜到有价值的解决方案,貌似问题非主流? 原因如下图(禁用即可): 当然这里NET Ref ...

  6. mysql从的配置文件

    mysql 从的配置文件 [client]port = 3306socket = /data/mysql/data/mysql.sock#default-character-set=utf8[mysq ...

  7. 使用rancher2建k8s集群--个人学习记录

    视频地址这里: http://live.vhall.com/431874021 原生文档这里:https://www.cnrancher.com/docs/rancher/v2.x/cn/overvi ...

  8. idea启动springboot+jsp项目出现404

    场景:用IntelliJ IDEA 启动 springBoot项目访问出现404,很皮,因为我用eclipse开发时都是正常的,找了很久,什么加注释掉<scope>provided< ...

  9. 使用kbmMWConfiguration 让 kbmmw smartservice 更聪明

    以前的文章介绍了 很多 kbmmw smartservice 的使用,尤其是 rest 服务,所有的的配置都是通过 开发时写编码实现的,这样就可能导致,针对不同的应用环境,我们要重新编译代码,当然也可 ...

  10. Linux学习--gdb调试

    一.gdb常用命令: 命令 描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或 ...