box-shadow可精准控制阴影位置与深度，配合transform-style: preserve-3d、translateZ()和rotateX/Y实现真实相册堆叠效果；禁用filter: drop-shadow()、overflow: hidden和will-change: transform，改用backface-visibility: hidden提升性能。
用 box-shadow 模拟物理投影，别碰 filter: drop-shadow()
真实相册堆叠的阴影不是扁平的，它随旋转角度和Z轴偏移变化——box-shadow 支持 x、y、blur、spread 四参数，能手动匹配每张图的视觉深度；而 filter: drop-shadow() 是基于图像Alpha通道的全局模糊，旋转后阴影会“漂移”，和图层实际朝向脱节。
实操建议：
-
box-shadow的y值要随rotateX增大而加大（模拟俯视时阴影下移） - 每张图的
shadow模糊半径建议控制在8px以内，避免层次感被糊掉 - 别给父容器设
overflow: hidden，否则阴影会被裁切
层级必须靠 z-index + transform-style: preserve-3d 配合
只设 z-index 不够：绝对定位元素默认在同一个平面渲染，rotateY 后看起来有前后，但浏览器仍按 DOM 顺序叠放。必须启用 3D 渲染上下文，让 z-index 和 transform: translateZ() 共同生效。
常见错误现象：z-index 设了但最上层图被中间图遮挡，或旋转后图层穿模。
实操建议：
- 相册容器加
transform-style: preserve-3d，且不能有overflow: hidden或will-change: transform干扰 - 每张图用
transform: rotateY(5deg) translateZ(20px)这类组合，translateZ()值越大越靠前 -
z-index值只需简单递增（如1、2、3），它只解决同 Z 距离下的优先级
rotate 参数差异：用 rotateX/rotateY，别只用 rotate
平面旋转 rotate(12deg) 只是绕Z轴转，做不出翻页式倾斜感；相册堆叠需要模拟纸张微倾，得用 rotateX（俯仰）和 rotateY（左右翻）混合。
使用场景：顶部图常加 rotateX(-8deg) 模拟微微抬头，右侧图加 rotateY(6deg) 模拟向右翻页。
实操建议：
- 单张图最多混用两个轴向旋转，
rotate3d()难控且可读性差 - 旋转角度建议 ≤ ±12deg，超过易显失真
- 所有图统一设
transform-origin: center，避免旋转中心偏移导致堆叠错位
性能关键：禁用 will-change: transform，改用 backface-visibility: hidden
很多人一上来就加 will-change: transform 试图“优化”，结果反而触发频繁图层重组，滚动卡顿。真正起效的是让背面不可见，减少合成器计算量。
兼容性影响：IE10+、Edge12+、Chrome/Safari/Firefox 均支持 backface-visibility，无兼容风险。
实操建议：
- 每张图加
backface-visibility: hidden，比will-change更稳 - 避免对整组图片设
opacity动画，它会强制重绘整个堆叠区域 - 如果需响应式缩放，用
transform: scale()，别改width/height
容易被忽略的是：所有图的 transform 必须写全（比如同时含 rotateY 和 translateZ），漏掉任一维会导致浏览器降级到 2D 渲染，z-index 和阴影立即失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
