纯CSS 3D相册需设perspective和transform-style: preserve-3d，用translateZ控制前后，backface-visibility隐藏背面，避免z-index失效；移动端需适配touch事件，禁用hover，慎用will-change防卡顿。
用 CSS 3D 变换实现相册翻转，别碰 Three.js
纯 HTML + CSS 就能做出带透视、翻转、悬停立体感的相册，不需要引入 Three.js 或 React-Three-Fiber。关键在 transform-style: preserve-3d 和正确的 transform 组合，否则所有子元素都会“拍平”到同一平面，看着像动了，其实没深度。
常见错误现象：transform: rotateY(45deg) 写了但图片还是平面旋转——大概率父容器漏了 transform-style: preserve-3d，或者父容器本身没设 perspective。
- 必须给相册容器（比如
.album）设perspective: 1000px（值越小“镜头越近”，立体感越强，但容易畸变） - 相册项（每张图的包裹盒）要加
transform-style: preserve-3d，否则子元素的 3D 位移无效 - 每张图建议用
backface-visibility: hidden，避免翻转时背面透出或闪烁 - 不要对
img标签直接加 3D 变换，而是包一层<div class="card"><img alt="html如何做一个3d立体相册" ></div>，变换作用在.card上
hover 触发翻转时，z-index 不会自动重排
CSS 3D 翻转不改变 DOM 层叠顺序，z-index 在 3D 空间里失效。看起来“前面”的卡片被遮挡，实际可能是它 Z 轴位置更靠后，或浏览器按原始文档流渲染叠层。
使用场景：鼠标悬停某张图，它向前翻转并“浮起”，其他图保持不动。如果只靠 z-index 提升，经常翻转后仍被挡住。
立即学习“前端免费学习笔记（深入）”；
- 真正控制前后关系的是
transform: translateZ()：正数往前推，负数往后拉 - 翻转时同步加
translateZ(50px)，比单纯调z-index可靠得多 - 避免多个卡片同时
translateZ冲突：用:hover单独作用于当前项，其他项保持translateZ(0) - Chrome 有时对
translateZ渲染有延迟，可加will-change: transform提前提示
移动端 touch 事件无法直接触发 :hover
iOS Safari 和部分安卓浏览器中，:hover 在触摸设备上只在点击后短暂触发一次，无法持续响应手指悬停——导致 3D 相册在手机上“点一下才动一下”，体验断裂。
解决不是加 JS 监听 touchstart 那么简单，因为触摸没有“离开”状态，容易卡在翻转态。
- 改用
:active+transition做瞬时反馈（适合单张查看） - 真要持续交互，得监听
touchstart加 class，再用touchend移除；但注意touchcancel也要处理，防止手势中断后状态残留 - 更稳妥的做法：检测
'ontouchstart' in window，移动端默认启用“点击展开单图”模式，放弃悬停翻转，改用全屏 3D 查看器（用transform: rotateX模拟翻页） - 别忘了加
meta viewport：缺少<meta name="viewport" content="width=device-width, initial-scale=1">会导致 3D 变换在移动端缩放错乱
性能差？多半是 transform 属性写错了
3D 动画卡顿，90% 不是 GPU 不行，而是浏览器被迫进行重排（reflow）或重绘（repaint）。比如用了 top/left 或 margin 触发动画，或 transform 里混写了非合成属性。
参数差异：transform: translateX(20px) rotateY(30deg) 是高效合成；而 transform: translateX(20px); left: 20px 就会触发 layout。
- 只用
transform和opacity做动画，这两者可由 GPU 独立加速 - 避免在动画中读取
offsetTop、getBoundingClientRect()等触发强制同步布局 - 如果相册项超过 20 张，考虑用
will-change: transform提前升层，但别滥用——每个都加反而增加内存开销 - 调试时打开 Chrome DevTools → Rendering → “Paint flashing”，红色闪动区域就是频繁重绘的地方
最常被忽略的一点：3D 变换的“锚点”默认是元素中心（transform-origin: 50% 50%），但做翻页效果时，你可能需要改成左边缘（transform-origin: 0 50%）——这个值一旦写死在 CSS 里，就很难根据图片宽高动态调整，得用 JS 算，但算错一像素，翻转轴就偏了。
