相册3d效果需外层容器设perspective、舞台容器设transform-style: preserve-3d，照片用translatez（±300px内）、rotate3d(0,1,0,θ)及backface-visibility:hidden。
直接给相册容器加 perspective 没用——它必须设在**外层舞台容器**上，且所有参与深度排列的子元素（比如每张照片）都得在正确的 3D 上下文中渲染，否则只是平面堆叠。
为什么相册总像贴纸一样平？检查父容器是否漏了 perspective 和 transform-style: preserve-3d
常见错误是把 perspective: 1000px 写在相册容器（如 .container）自己身上，或者干脆写在 body 上。前者无效，后者在 iOS Safari 上大概率失效。
-
.photo-wrap（最外层包裹容器）应设perspective: 800px—— 这是观察者到 z=0 平面的距离，为整个相册提供统一透视基准 -
.container（相册舞台）必须设transform-style: preserve-3d，否则所有translateZ位移都会被浏览器强制拍平成 2D - 如果
.container还有父级（比如.scene），就别省这一步；移动端 Safari 对html或body上的perspective支持不一致，务必用显式容器
translateZ 拉不开层次？确认值没超过 perspective 的“视锥边界”
translateZ 不是随便设个正数就能往后退——它的绝对值一旦 ≥ 父容器的 perspective 值，元素就会缩成一个点甚至完全不可见。
- 若
.photo-wrap { perspective: 800px; }，则每张照片的translateZ建议控制在-300px到+300px区间内 - 负值表示“向前浮出”，正值表示“向后退入”；但
translateZ(800px)在perspective: 800px下已处于消失点，不可见 - 多张照片按景深错落排布时，推荐用等差序列：比如
translateZ(-200px)、translateZ(-100px)、translateZ(0)、translateZ(100px)……避免跳跃过大失真
旋转照片总歪着翻？优先用 rotate3d() 而非 rotateY()
rotateY(45deg) 绕的是元素**当前局部坐标系**的 Y 轴，而这个轴会随之前变换偏移；相册里照片常需绕屏幕垂直轴稳定旋转（即用户视角的 Y 轴），这时 rotateY 容易跑偏。
- 改用
rotate3d(0, 1, 0, 45deg)，明确指定绕全局 Y 轴旋转，结果更可控 - 若某张照片还需叠加 X 向微倾（比如模拟手持拍照的轻微仰角），写成
rotate3d(0, 1, 0, 45deg) rotate3d(1, 0, 0, 5deg)，注意顺序：CSS 从左到右执行，先绕 Y 再绕 X - 避免混用
rotateY和rotate3d，不同解析逻辑可能导致意外交互或 Safari 渲染异常
照片背面露出来？backface-visibility: hidden 得加在每张照片上
这个属性不会继承，也不会因父容器设置而生效。只要照片要翻转（比如配合 rotateY(180deg) 实现翻页效果），背面内容就可能意外显示。
- 每张照片元素（如
.img）必须单独设backface-visibility: hidden - 别误加在
.container或.photo-wrap上——那没作用 - 旧版 Safari（iOS 9.3 之前）不支持
preserve-3d，此时backface-visibility也会退化，需准备降级方案（比如用 opacity 模拟翻转）
最容易被忽略的不是某个属性写错，而是组合失效：没有 perspective，就没有观察基准；没 preserve-3d，Z 轴就不存在；backface-visibility 漏加一张，整组翻转就穿帮。真实感来自这些约束条件同时成立，而不是单点炫技。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
