概述

之前觉得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. Lonsdor K518ISE SCION 2011-2018 Models Enabled!

    Lonsdor released the Lonsdor K518ISE Key Programmer update announcement on 14-03-2019, saying it can ...

  2. 装了SVN软件，但是文件夹没有绿色和红色的图标显示

    第一步: win+R,输入regedit,打开注册表.查找ShellIconOverlayIdentifiers,可以找到Tortoise相关的标签,这个时候会发现,这些标签都排在后面.需要在这些标签 ...

  3. python3 第三十章 - 内置函数之Dictionary相关

    Python字典包含了以下内置函数: 序号 函数及描述 实例 1 len(dict)计算字典元素个数,即键的总数. >>> dict = {'Name': 'cnblogs', 'A ...

  4. python 练习2

    购物订单系统: #!usr/bin/env python # encoding: utf-8 import sys i = 0 inventory_dic = {'Car':1000,'SUV':50 ...

  5. Java的xml与map,与Bean互转

    xml与map互转,主要使用dom4j import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j. ...

  6. C语言错题集

    1.输入两个int型数a.b,求a/b的商c,不必考虑b为0的情况,输出c(保留两位小数) include<stdio.h> int main() { int a,b; float c; ...

  7. 数组，arrayList和List

    数组,arrayList和List (1)数组在C#中是最早出现的.它在内存中是连续的存储的,所以索引速度很快,而且赋值与修改元素也很简单.可以利用偏移地址访问元素,时间复杂度为O(1);可以用折半查 ...

  8. django中views中方法的request参数

    知其然亦要知其所以然 views每个方法的参数都是request,那么问题来了,request为何物? 首先,几乎每个方法都是取数据(无论是从数据库,还是从第三方接口),然后进行一定的处理,之后传给前 ...

  9. Linux关于文件,文件夹操作命令

    文件 文件夹 相关操作命令 查看文件 cd 切换目录位置 ls 目录    查看指定目录所有文件  --缺省当前目录 ls -l 目录 查看指定目录所有文件的详细信息 --同 ll 命令 ls -a ...

  10. Yaf 完全精通

    bugs 这样 _Bootstrap 的话,会导致严重的后果,cpu 100%