概述

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

3D翻转

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.   div {
  8.     margin: 200px 0 0 200px;
  9.     width: 200px;
  10.     height: 200px;
  11.   }
  12.   i {
  13.     display: block;
  14.     width: 100%;
  15.     height: 100%;
  16.     box-shadow: 10px 10px 150px #5fbdff;
  17.     transition: all 2s;
  18.     -webkit-transform: perspective(800px);
  19.     -ms-transform: perspective(800px);
  20.     -o-transform: perspective(800px);
  21.     transform: perspective(800px);
  22.   }
  23.   div:hover i {
  24.     -webkit-transform: perspective(800px) rotateY(180deg);
  25.     -ms-transform: perspective(800px) rotateY(180deg);
  26.     -o-transform: perspective(800px) rotateY(180deg);
  27.     transform: perspective(800px) rotateY(180deg);
  28.   }
  29.   </style>
  30. </head>
  31. <body>
  32.   <div>
  33.     <i></i>
  34.   </div>
  35. </body>
  36. </html>

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

视差效果

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.   html, body {
  8.     height: 100%;
  9.     margin: 0;
  10.     overflow: hidden;
  11.   }
  13.   body {
  14.     color: white;
  15.     font-family: sans-serif;
  16.     font-size: 1.8em;
  17.     display: flex;
  18.     align-items: center;
  19.     justify-content: center;
  20.   }
  22.   .content {
  23.     margin: 1px;
  24.     width: 140px;
  25.     height: 140px;
  26.     display: flex;
  27.     align-items: center;
  28.     justify-content: center;
  29.     box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
  30.     transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  31.   }
  32.   </style>
  33. </head>
  34. <body>
  35.   <div class="wowpanel">
  36.     <div class="content">move</div>
  37.   </div>
  38.   <div class="wowpanel">
  39.     <div class="content">your</div>
  40.   </div>
  41.   <div class="wowpanel">
  42.     <div class="content">cursor</div>
  43.   </div>
  44.   <div class="wowpanel">
  45.     <div class="content">over</div>
  46.   </div>
  47.   <script>
  48.     const ANGLE = 45;
  50.     let wowpanels = document.querySelectorAll(".wowpanel");
  51.     let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];
  53.     wowpanels.forEach((element, i) => {
  54.       floatable(element, colors[i]);
  55.     });
  57.     function floatable (panel, color) {
  58.       let content = panel.querySelector(".content");
  59.       content.style.backgroundColor = color;
  61.       panel.addEventListener('mouseout', e => {
  62.         content.style.transform = `perspective(300px)
  63.                        rotateX(0deg)
  64.                        rotateY(0deg)
  65.                        rotateZ(0deg)`;
  66.       });
  68.       panel.addEventListener('mousemove', e => {
  69.         let w = panel.clientWidth;
  70.         let h = panel.clientHeight;
  71.         let y = (e.offsetX - w * 0.5) / w * ANGLE;
  72.         let x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;
  74.         content.style.transform = `perspective(300px)
  75.                        rotateX(${x}deg)
  76.                        rotateY(${y}deg)`;
  77.       });
  78.     }
  79.   </script>
  80. </body>
  81. </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. spring boot利用controller来测试写的类

    我们在开发spring boot应用程序的时候,往往需要测试某个写好的类,但是在测试的时候发现不太好测试,用Junit等测试框架,总是会报一些问题,大致是找不到配置文件以及无法利用spring创建的对 ...

  2. python14 常用模块 二

    一.json模块 强大:不同语言之间可以进行数据交换 序列化:把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serializati ...

  3. Winform 利用 Oracle.ManagedDataAccess访问Oracle数据库

    Winform 利用 Oracle.ManagedDataAccess访问Oracle数据库时出现以下错误: Message = "每个配置文件中只允许存在一个 <configSect ...

  4. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

  5. 关于学习python的想法

    选择学习python,就是一次对自己的挑战.自己之前并没有python的基础,只是学习了一点C语言的知识.对于这个课程了解的不是很多,只是上学期在网上自学了一点,自己也是对这门语言感兴趣,所以这个学期 ...

  6. java -关于包装类自动装箱与拆箱拓展+整形常量池

    关于自动装箱与拆箱 1.包装类与基本数据类型的自动转换,叫装箱和拆箱(类型自动转换) 2.自动装箱拆箱是在编译器,编译器自动配转换方法,实现装箱和拆箱.所以这个过程发生在编译期 3.只有需要相互类型转 ...

  7. PHP常用180函数总结【初学者必看】

    数学函数 1.abs(): 求绝对值 <span style="font-size: 14px;">$abs = abs(-4.2); //4.2<br>& ...

  8. 在anguler项目中引用fullCalendar

    1.css文件引用 <link href="/CSS/Fullcalendar.css" rel="stylesheet" /> <!--插件 ...

  9. Transform(变换)—Y轴lable内容旋转

    <!DOCTYPE html> <html> <head> <style> div{ border:1px solid; } .bb{ position ...

  10. Codeforces Codeforces Round #484 (Div. 2) D. Shark

    Codeforces Codeforces Round #484 (Div. 2) D. Shark 题目连接: http://codeforces.com/contest/982/problem/D ...