3d分层悬停效果

写在前面

经过了2个星期的努力，我回来了！会继续将我学习路上遇到的问题，以及一些笔记，demo分享给大家

实现效果

致我最爱的backpink

实现思路

  1. 将6张图片，通过定位叠在一起
  2. 当鼠标移入时，每张图片旋转一定的角度，从而实现

思路很简单，实现也很简单，但是效果很好看

实现过程

HTML

<div class="imgBox">

    <div class="innerBox">

        <img src="img/1.jpg" style="--ljc:1;" alt="">

        <img src="img/1.jpg" style="--ljc:2;" alt="">

        <img src="img/1.jpg" style="--ljc:3;" alt="">

        <img src="img/1.jpg" style="--ljc:4;" alt="">

        <img src="img/1.jpg" style="--ljc:5;" alt="">

        <img src="img/1.jpg" style="--ljc:6;" alt="">

    </div>

</div>

html结构很简单，用盒子包裹6张图片，--ljc自定义属性后面会提高

CSS样式

给装图片的盒子添加hover事件，旋转一定的角度，skew属性是扭曲距离，这个实操一下效果很明显，不了解的可以动手试试

.innerBox:hover {

    transform: rotateX(35deg) skew(10deg) rotateZ(-35deg);

}

这里利用了css的calc函数以及var变量来实现，简化了代码

在html中我们给每个图片都设置了--ljc属性，并赋予了不一样的数值，这个数值就是用来计算我们偏移距离，例如--ljc:2通过calc函数计算的10px*2也就是20px,其他几个也是一样的，--ljc就相当于一个变量的存在

.innerBox:hover img {

    transform: translateX(calc(-10px * var(--ljc))) translateY(calc(10px * var(--ljc))) translateZ(calc(-10px * var(--ljc)));

    opacity: calc(0.1 * (10 - var(--ljc)));

}

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body {

            background-color: black;

        }

        .imgBox {

            position: relative;

            display: flex;

            justify-content: center;

            margin-top: 40px;

            perspective: 2000px;

        }

        .innerBox {

            position: relative;

            width: 250px;

            height: 500px;

            transition: all 0.5s;

            transform-style: preserve-3d;/*3d效果*/

        }

        .innerBox img {

            position: absolute;

            width: 100%;

            height: 100%;

            border: none;

            box-shadow: 0 0 8px pink;

            transition: all 1.5s;

            transform: translateZ(0px);

        }

        .innerBox:hover {

            transform: rotateX(35deg) skew(10deg) rotateZ(-35deg);

        }

        .innerBox:hover img {

            transform: translateX(calc(-10px * var(--ljc))) translateY(calc(10px * var(--ljc))) translateZ(calc(-10px * var(--ljc)));

            opacity: calc(0.1 * (10 - var(--ljc)));

        }

    </style>

</head>

<body>

    <div class="imgBox">

        <div class="innerBox">

            <img src="img/1.jpg" style="--ljc:1;" alt="">

            <img src="img/1.jpg" style="--ljc:2;" alt="">

            <img src="img/1.jpg" style="--ljc:3;" alt="">

            <img src="img/1.jpg" style="--ljc:4;" alt="">

            <img src="img/1.jpg" style="--ljc:5;" alt="">

            <img src="img/1.jpg" style="--ljc:6;" alt="">

        </div>

    </div>

</body>

</html>

这个效果实现起来并不难，但是足够炫酷！

更多阅读

充电水波摇晃效果
旋转水滴加载效果
抖音超火的罗盘时钟效果
圆盘时钟效果
文字抖动效果
旋转魔方效果
文字闪烁效果
加载动画效果
炫彩流光按钮
原生js轮播图效果
文字折叠效果

3d分层悬停效果的更多相关文章

  1. MFC 使用位图按钮，并且设置按钮的鼠标悬停效果

    系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...

  2. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  3. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  4. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  5. JQ实现3D拖拽效果

    <!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...

  6. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  7. HTML+CSS鼠标悬停效果

    HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a clas ...

  8. Android ScrollView滚动实现大众点评、网易云音乐评论悬停效果

    今天听着网易云音乐,写着代码,真是爽翻了. http://blog.csdn.net/linshijun33/article/details/47910833 网易云音乐这个产品亮点应该在评论这一模块 ...

  9. 超酷3D照片展示效果

    @{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...

随机推荐

  1. matlab通用命令

    常用命令 命令 命令说明 cd 显示或改变当前文件夹 dir 显示当前文件夹或指定目录下的文件 clc 清除工作窗中的所有显示内容 home 将光标移至命令行窗口的最左上角 clf 清除图形窗口 ty ...

  2. 如何查看显著性SNP在数据中的频率？

    我们做完GWAS的关联分析后需要查看显著性SNP在我们数据中的频率分布情况.这时候我们需要用到plink和我们做关系分析所用的二进制文件datas. 第一步,我们用R语言读取分析结果,即*.assoc ...

  3. 锁定项目的 node 版本

    一些老项目对 node 版本是有要求的,往往使用默认的新版本包安装不上,scripts 也跑不起来. 之前就遇到过运行一个小程序项目时,根据文档来,第一步安装就出错.本着办法总比问题多的理念,来一个解 ...

  4. junit+maven单元测试

    一.概念 junit是一个专门测试的框架 集合maven进行单元测试,可批量测试类中的大量方法是否符合预期 二.作用:单元测试:测试的内容是类中的方法,每一个方法都是独立测试的.方法是测试的基本单位. ...

  5. hdu4179 限制最短路

    题意:       这个题目估计读懂题意就ok了,关键是题意蛋疼,像我这样的英语渣渣活着可真难啊,题意大体是这样,给你n个点m条无向边,给你起点和终点,让你求从起点到终点的最短路径,其中有一些限制: ...

  6. PAT 乙级 -- 1011 -- A+B和C

    问题简述 给定区间[-231, 231]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序 ...

  7. Windows中的工作组和域

    目录 工作组 工作组的访问 工作组的优缺点 域 ​域结构 域的原理 部署域架构 如何加入域 域中主机的登录 SRV出错及解决办法 SRV记录注册不成功的可能原因 禁用域中的账户 将计算机退出域 工作组 ...

  8. unity怎么把工程打包成unitypackage文件

    unity怎么把工程打包成unitypackage文件 想探讨问题的原因 上课的时候,看到老师的磁盘都要爆满了,主要的原因是同学们提交的2DGameKit,工程文件太大了. 文件没有压缩,占用空间是2 ...

  9. IOS Widget（5）：小组件刷新机制

    引言   前面的章节学完已经让我们可以顺利实现一个小组件了,但是小组件里面的数据如何刷新的呢,本节内容将讲解IOS的刷新机制. 大纲 系统如何管理小组件刷新 Timeline刷新机制 Timeline ...

  10. 使用C#操作注册表

    这节讲一下使用C#操作注册表. 首先来了解一下,什么是注册表,注册表是Windows中特有的一个东西,百度百科中对其解释如下:Windows注册表(Registry)实质上是一个庞大的数据库,它存储着 ...