https://blog.archai.space/tags/css-3d/ Recent content in CSS 3D on Archai's home Hugo -- gohugo.io Thu, 18 Jan 2024 00:00:00 +0000 https://blog.archai.space/p/%E4%BB%8E%E9%9B%B6%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA3d%E5%8D%A1%E7%89%87%E7%9A%84%E9%95%9C%E9%9D%A2%E5%80%92%E5%BD%B1%E6%95%88%E6%9E%9C/ Thu, 18 Jan 2024 00:00:00 +0000 https://blog.archai.space/p/%E4%BB%8E%E9%9B%B6%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA3d%E5%8D%A1%E7%89%87%E7%9A%84%E9%95%9C%E9%9D%A2%E5%80%92%E5%BD%B1%E6%95%88%E6%9E%9C/ 背景 在为 ACMUSIC（网易云第三方客户端）的私人FM模块添加镜面倒影效果时，遇到了一个有趣的技术挑战：镜面倒影明明 DOM 结构正确、transform 也没问题，但就是不可见。这篇文章记录了排查过程和最终的解决方案。 1. 三层结构设计 倒影系统采用三层嵌套结构： .fm-card-wrapper（3D 变换容器） ├─ .fm-card（封面卡片，340×340, border-radius 28px） └─ .fm-reflection-plane（倒影裁剪平面） └─ .fm-reflection（倒影元素，scaleY(-1) 翻转） └─ img（封面图片，340×340） 关键设计思路： plane：position 在卡片正下方，overflow: hidden + border-radius: 28px 负责裁剪倒影可见区域和圆角 reflection：position 在 plane 内部，通过 transform: scaleY(-1) 实现垂直镜像 img：复用封面图片，object-fit: cover 填充 2. 核心 CSS 2.1 Plane——裁剪平面 1 2 3 4 5 6 7 8 9 10 11 12 .fm-reflection-plane { position: absolute; left: 0; top: 100%; // 紧贴卡片底部 width: 100%; height: 410px; // 关键：高度要足够大 overflow: hidden; // 裁剪可见区域 pointer-events: none; border-radius: 28px; // 与卡片圆角一致 // 真正的可见高度由 clip-path 控制 clip-path: inset(0 0 300px 0); // 顶部 110px 可见 } 2.