3d分层悬停效果

小丞同学

发布于 2021-08-16 15:51:14

6810

发布于 2021-08-16 15:51:14

文章被收录于专栏：小丞前端库

3d分层悬停效果

写在前面

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

实现效果

致我最爱的backpink

实现思路

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

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

实现过程

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>

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/05/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法