HTML&CSS：精美的3D折叠卡片悬停效果

这个 HTML 文件实现了一个精美的 3D 折叠卡片悬停效果。当用户将鼠标悬停在中间的卡片上时，卡片会展开成多层结构，呈现出立体感的动态变换，同时整体视角也会发生倾斜，创造出深度感和视觉吸引力。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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>有趣的鼠标效果</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
        * {
        box-sizing: border-box;
        }
        html,
        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        :root {
            --sz: clamp(10px, min(2vw, 3vh), 24px);
            font-size: var(--sz);
            --fz: 10rem;
            --exp: 24deg;
            --per: 54deg;
            --tilt: 10deg;
        }
        body {
            display: grid;
            place-items: center;
            background: #e0e0e0;
            color: #444;
        }
        body,
        .base,
        .base * {
            transform-style: preserve-3d;
            perspective: 2000px;
            font-weight: 100;
            transition: all 1s ease-in-out;
            font-family: "Playfair Display", serif;
        }
        body > h2 {
            transition: all 1s ease-in-out;
            position: absolute;
            font-size: var(--fz);
            transform: rotateX(var(--per));
            font-weight: 100;
        }
        body:has(.base:hover) > h2 {
            transform: rotateX(calc(var(--per) + var(--tilt)));
        }

        .base {
            transform: rotateX(var(--per));
            width: 10rem;
            height: 15rem;
            border: 1px solid #fff;
            position: relative;
            box-shadow: 0 0 0 0.6rem #000c, inset 10rem 0 10rem -5rem #000a,
                inset 0 0 0 0.6rem #fff, 0 0 0 0 #000a;
            background: url("https://img0.baidu.com/it/u=283204948,2024515402&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
            background-size: cover;
            cursor: pointer;
        }
        .base:hover {
            transform: rotateX(calc(var(--per) + var(--tilt)));
            box-shadow: 0 0 0 0.6rem #000c, inset 10rem 0 10rem -5rem #000a,
                inset 0 0 0 0.6rem #fff, 2rem -2rem 5rem 0 #000a;
        }
        .pane {
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 0 0.6rem #fff;
            display: grid;
            place-items: center;
        }
        .base > .pane {
            transform-origin: 0 50%;
            background: url("https://img0.baidu.com/it/u=283204948,2024515402&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
            background-size: cover;
            box-shadow: inset -10rem 0 10rem -5rem #0004, inset 0 0 0 0.6rem #fff;
        }
        .base > .pane > .pane {
            transform-origin: 100% 50%;
            background: url("https://img0.baidu.com/it/u=283204948,2024515402&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
            background-size: cover;
            box-shadow: inset 10rem 0 10rem -5rem #000a, inset 0 0 0 0.6rem #fff;
        }
        .base > .pane > .pane > .pane {
            transform-origin: 0 50%;
            background: #e0e0e0;
            overflow: hidden;
            position: relative;
        h2 {
            font-size: var(--fz);
            text-align: center;
            position: absolute;
            white-space: nowrap;
        }
        }
        .base:hover > .pane {
            transform: rotateY(calc(-1 * var(--exp)));
        }
        .base:hover > .pane > .pane {
            transform: rotateY(calc(2 * var(--exp)));
        }
        .base:hover > .pane > .pane > .pane {
            transform: rotateY(calc(-1 * var(--exp)));
        }

    </style>
</head>
<body>
    <h2>喜欢你</h2>
    <div class="base">
        <div class="pane">
            <div class="pane">
                <div class="pane">
                    <h2>喜欢你</h2>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

HTML

html 复制代码

  <h2>喜欢你</h2>
  <div class="base">
      <div class="pane">
          <div class="pane">
              <div class="pane">
                  <h2>喜欢你</h2>
              </div>
          </div>
      </div>
  </div>

外层 h2：作为背景装饰性文字
base 容器：主卡片容器，包含多层嵌套结构
pane 层级：三层嵌套的 pane 元素，用于创建 3D 折叠效果
内层 h2：折叠展开后显示的文字内容

CSS

3D 变换设置：

css 复制代码

transform-style: preserve-3d;
perspective: 2000px;

这些属性为元素及其子元素创建 3D 空间，是实现立体效果的基础

CSS 变量：

css 复制代码

:root {
--sz: clamp(10px, min(2vw, 3vh), 24px);
--fz: 10rem;
--exp: 24deg;
--per: 54deg;
--tilt: 10deg;
}

使用 CSS 变量方便统一调整参数，增强代码可维护性。

悬停效果：

css 复制代码

.base:hover {
transform: rotateX(calc(var(--per) + var(--tilt)));
}
.base:hover > .pane {
transform: rotateY(calc(-1 * var(--exp)));
}

通过:hover 伪类实现鼠标交互，各层 pane 以不同角度旋转，形成折叠效果

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！