悬停揭示卡片（遮罩滑出 + 3D 翻转两种形态 CSS 源码）

效果演示（真实可交互）

下方两张卡片演示两种揭示形态：左为渐变遮罩从底部滑出完整介绍，右为整卡绕 Y 轴 3D 翻转露出背面，悬停均有明显动效。

完整代码

HTML 结构：形态一为遮罩滑出，形态二为内层双面结构：

<!-- 形态一：遮罩滑出 -->
<div class="rv-card rv-slide">
  <div class="rv-face">…正面内容…</div>
  <div class="rv-cover">…遮罩详情…</div>
</div>

<!-- 形态二：3D 翻转 -->
<div class="rv-card rv-flip">
  <div class="rv-inner">
    <div class="rv-face face-front">…正面…</div>
    <div class="rv-face face-back">…背面…</div>
  </div>
</div>

核心 CSS：

/* 形态一：遮罩从底部滑入 */
.rv-cover {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #6c8cff, #b388ff);
  transform: translateY(100%);          /* 默认藏在底部 */
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.rv-slide:hover .rv-cover { transform: translateY(0); }

/* 形态二：3D 翻转 */
.rv-flip { perspective: 900px; }        /* 父容器提供透视 */
.rv-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;         /* 保留子元素 3D 空间 */
  transition: transform .6s cubic-bezier(.4, .1, .2, 1);
}
.rv-flip:hover .rv-inner { transform: rotateY(180deg); }
.rv-face { backface-visibility: hidden; }   /* 背面隐藏 */
.face-back { transform: rotateY(180deg); }  /* 背面预转 180° */

参数说明

兼容性与性能

• 纯 CSS 实现，backface-visibility 与 transform-style: preserve-3d 在现代浏览器均稳定支持
• 3D 翻转涉及合成层，建议翻转卡片数量不要过多；Safari 下记得补 -webkit-backface-visibility 前缀
• 遮罩滑出只动 transform，性能开销小，适合列表批量使用
• 触屏设备无 hover，建议为遮罩形态同时提供点击切换（配合 JS 加类名）

常见问题

Q: 翻转后背面文字是反的怎么办？ 检查 .face-back 是否设置了 transform: rotateY(180deg)，没有预转就会出现镜像文字。

Q: 遮罩想从左边滑入？ 把 translateY(100%) 换成 translateX(100%)，并把 inset: 0 保留即可。

Q: 手机上想看背面内容怎么操作？ 触屏没有 hover，可以监听 tap 事件给 .rv-flip 添加一个 .active 类，CSS 用 .rv-flip.active .rv-inner 触发翻转。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。