概述

之前觉得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. 使用react-handsontable

    新建一个项目 create-react-app myProject cd myProject npm install handsontable 或者 npm install handsontable- ...

  2. slot-scope

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...

  3. windows server 2016安装

    slmgr /skms kms.03k.org slmgr /ato slmgr /ipk WC2BQ-8NRM3-FDDYY-2BFGV-KHKQY kms服务器: https://03k.org/ ...

  4. centos 添加右键在终端打开

    yum -y install nautilus-open-terminal

  5. Ax2009中使用CLR发送邮件

    由于Ax2009系统方法SysMailer 发送中文的时候会乱码,一直找不到原因,用.NEt Framwork的类库可以解决中文乱码的问题.static void CKT_DotNetMail(Arg ...

  6. Windows PowerShell基本语法及常用命令

    PowerShell常用命令: 一 Get类 1.Get-Command : 得到所有PowerShell命令,获取有关 cmdlet 以及有关 Windows PowerShell 命令的其他元素的 ...

  7. Django中发件邮箱的设定

    Django中发件邮箱的设定: EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'#邮件发送到邮件服务器 #EMAIL_BACK ...

  8. ----Arrow functions----

    Arrow functions Arrow functions表达式相比函数表达式有更短的语法,没有自己的this.argument.super或者new.target. 1.语法规则: 基础语法: ...

  9. JQUERY-事件-动画-类数组对象-添加自定义API

    正课: 1. 事件: 2. 动画: 3. 类数组对象操作: 4. 添加自定义API: 1. 事件: 1. 页面加载后执行: 2个时机 1. DOM内容加载完成: 仅包括html, js DOMCont ...

  10. 2019.03.28 bzoj3597: [Scoi2014]方伯伯运椰子（01分数规划）

    传送门 题意咕咕咕有点麻烦不想写 思路: 考虑加了多少一定要压缩多少,这样可以改造边. 于是可以通过分数规划+spfaspfaspfa解决. 代码: #include<bits/stdc++.h ...