CSS实现3D展开效果

原创

wx57fda7d5344a4 2023-06-26 18:56:28 ©著作权

文章标签 3D 过渡效果 ci 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者wx57fda7d5344a4的原创作品，请联系作者获取转载授权，否则将追究法律责任

CSS实现3D展开效果

不知道你们看没看看过游戏角色3D展开时的那种效果。或者当我们想要买东西的时候，当我们hover放置在这个商品时，会出现一个商品要弹出手机的效果。

先看效果

游戏角色3D展开，当我们鼠标hover至这个角色时，它就会从背景里要跳出来的那种。

CSS实现3D展开效果_过渡效果

实现思路剖析

html剖析

整个页面就是一个wrap里面有一个div-card包裹着三个div,一个背景，一个角色，还有一个文字。

<div class="wrap">
        <div class="card">
            <div class="rolebg">
                <img src="https://lan.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/winter-rift-banner.jpg?itok=a515W7Hc"
                    alt="">
            </div>
            <div class="role">
                <img src="https://m1-cdn.imeijian.cn/materials/2023/04/22/MRB6X7YKTJAWKAABAAAAADY8.jpg?x-oss-process=style/3000wh_webp"
                    alt="">
            </div>
            <div class="content">
                <h2>这是一个3D展开效果小案例</h2>
                <p>hover将会3D展开,正常就是平面效果</p>
                </p>
            </div>
        </div>
    </div>

主要思路CSS剖析

首先我们在*里b设置了 box-sizing: border-box可以使得元素的尺寸计算更加方便和准确，同时避免了一些常见的布局问题。
wrap里我们设置了弹性布局水平垂直居中
card里我们设置了合适的高度与宽度，并且设置了position: relative;便于它的子元素能够根据它进行绝对定位。
给背景设置大小与卡片一样的大小，并给他一个动画效果。transform: rotateX(40deg) skewX(-5deg);旋转并倾斜，时间为2s。 transform-origin: bottom; /* 设置变换原点为底部 */这样看到的效果是整张图片往后倒的那种。
给角色设置大小一半背景的大小，这个可以根据图片自己来调。然后因为为了便于好看，我把角色移到了正中间。设置 position: absolute;让角色在背景图片上。 transform-origin: bottom; /* 设置变换原点为底部 */这样便于角色与背景相结合。给角色也加一个动画。transform: scale(2.4);放大2.4倍。
文字内容，一开始设置透明度为0，不显示。然后加一个动画效果，下滑，并且透明度为1。他也是使用了 position: absolute;让文字一开始就在背景上。然后慢慢下移显示。

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置外层容器样式 */
        .wrap {
            width: 100%;
            height: 100vh;
            display: flex;
            /* 使用flex布局使得子元素居中 */
            justify-content: center;
            align-items: center;
            background-color: black;
            /* 设置背景颜色 */
        }

        /* 设置卡片样式 */
        .card {
            width: 440px;
            height: 250px;
            position: relative;
        }

        /* 设置角色背景样式 */
        .rolebg {
            width: 440px;
            height: 250px;
            border-radius: 20px;
            /* 设置圆角 */
            overflow: hidden;
            /* 隐藏超出区域的内容 */
            box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.05);
            /* 设置阴影 */
            transform-origin: bottom;
            /* 设置变换原点为底部 */
            transition: 2s;
            /* 设置过渡效果 */
        }

        /* 设置角色背景图片样式 */
        .rolebg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 自适应填充 */
        }

        /* 设置角色样式 */
        .role {
            width: 220px;
            height: 100px;
            position: absolute;
            bottom: 0px;
            left: calc(50% - 110px);
            /* 居中 */
            transform-origin: bottom;
            /* 设置变换原点为底部 */
            transition: 2s;
            /* 设置过渡效果 */
        }

        /* 设置角色图片样式 */
        .role img {
            width: 100%;
            height: 100%;
        }

        /* 设置内容样式 */
        .content {
            width: 440px;
            padding: 10px;
            color: #fff;
            position: absolute;
            bottom: -50px;
            /* 初始位置在底部 */
            opacity: 0;
            /* 初始透明度为0 */
            transition: 2s;
            /* 设置过渡效果 */
        }

        .content h2 {
            font-weight: 200;
            /* 设置标题字体 */
        }

        .content p {
            font-weight: 200;
            /* 设置内容字体 */
            padding-top: 10px;
            font-size: 14px;
        }

        /* 设置鼠标悬停时的效果 */
        .card:hover .rolebg {
            transform: rotateX(40deg) skewX(-5deg);
            /* 旋转+倾斜 */
        }

        .card:hover .role {
            transform: scale(2.4);
            /* 放大 */
        }

        .card:hover .content {
            opacity: 1;
            /* 透明度变为1 */
            transform: translateY(120px);
              /* 下移 */
        }

源码

<!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>3D展开效果</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置外层容器样式 */
        .wrap {
            width: 100%;
            height: 100vh;
            display: flex;
            /* 使用flex布局使得子元素居中 */
            justify-content: center;
            align-items: center;
            background-color: black;
            /* 设置背景颜色 */
        }

        /* 设置卡片样式 */
        .card {
            width: 440px;
            height: 250px;
            position: relative;
        }

        /* 设置角色背景样式 */
        .rolebg {
            width: 440px;
            height: 250px;
            border-radius: 20px;
            /* 设置圆角 */
            overflow: hidden;
            /* 隐藏超出区域的内容 */
            box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.05);
            /* 设置阴影 */
            transform-origin: bottom;
            /* 设置变换原点为底部 */
            transition: 2s;
            /* 设置过渡效果 */
        }

        /* 设置角色背景图片样式 */
        .rolebg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 自适应填充 */
        }

        /* 设置角色样式 */
        .role {
            width: 220px;
            height: 100px;
            position: absolute;
            bottom: 0px;
            left: calc(50% - 110px);
            /* 居中 */
            transform-origin: bottom;
            /* 设置变换原点为底部 */
            transition: 2s;
            /* 设置过渡效果 */
        }

        /* 设置角色图片样式 */
        .role img {
            width: 100%;
            height: 100%;
        }

        /* 设置内容样式 */
        .content {
            width: 440px;
            padding: 10px;
            color: #fff;
            position: absolute;
            bottom: -50px;
            /* 初始位置在底部 */
            opacity: 0;
            /* 初始透明度为0 */
            transition: 2s;
            /* 设置过渡效果 */
        }

        .content h2 {
            font-weight: 200;
            /* 设置标题字体 */
        }

        .content p {
            font-weight: 200;
            /* 设置内容字体 */
            padding-top: 10px;
            font-size: 14px;
        }

        /* 设置鼠标悬停时的效果 */
        .card:hover .rolebg {
            transform: rotateX(40deg) skewX(-5deg);
            /* 旋转+倾斜 */
        }

        .card:hover .role {
            transform: scale(2.4);
            /* 放大 */
        }

        .card:hover .content {
            opacity: 1;
            /* 透明度变为1 */
            transform: translateY(120px);
            /* 下移 */
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="card">
            <div class="rolebg">
                <img src="https://lan.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/winter-rift-banner.jpg?itok=a515W7Hc"
                    alt="">
            </div>
            <div class="role">
                <img src="https://m1-cdn.imeijian.cn/materials/2023/04/22/MRB6X7YKTJAWKAABAAAAADY8.jpg?x-oss-process=style/3000wh_webp"
                    alt="">
            </div>
            <div class="content">
                <h2>这是一个3D展开效果小案例</h2>
                <p>hover将会3D展开,正常就是平面效果</p>
                </p>
            </div>
        </div>
    </div>

</body>

</html>