perspective必须作用于父容器并配合transform-style: preserve-3d才能激活子元素Z轴渲染，值需设为600–1200px的px/rem单位，且祖先元素不可有overflow:hidden等截断属性。
perspective 不是“加了就有3D感”的开关，它必须作用在父容器上、配合 transform-style: preserve-3d 才能真正激活子元素的Z轴空间渲染；值设错或位置放错，动画就只是平面旋转。
perspective 必须加在父容器上，不是卡片或变换元素本身
很多人把 perspective: 1000px 直接写在要翻转的 .card 上，结果动画没纵深——因为 perspective 定义的是「观察者到 z=0 平面的距离」，它只对**子元素**生效，且需由父级提供共享观察空间。
- 错误写法：
.card { perspective: 1000px; transform: rotateY(180deg); }→ 浏览器忽略perspective，旋转无透视缩放 - 正确结构：用
.card-container包裹卡片，并在其上同时设置perspective和transform-style: preserve-3d - 移动端 Safari 特别敏感，
perspective加在body或html上会引发position: fixed错位，务必单独包裹一层.scene
perspective 值怎么选：太小变形、太大失真
perspective 值不是越大越好，也不是越小越炫，它直接决定你“站得多近”。值影响的是 Z 轴位移的视觉缩放比例，而非是否启用 3D。
-
perspective: 300px：像凑近手机看，translateZ(50px)就明显放大，但translateZ(200px)可能超出视距而消失 -
perspective: 1000px：推荐起始值，适配多数卡片/魔方类场景，兼顾自然感与可控性 -
perspective: 5000px：接近正交投影，rotateX看起来像倾斜，translateZ几乎看不出前后差异 - 单位只能是绝对长度：
px、rem合法；%、em无效
为什么写了 perspective 还没效果？先查这三件事
常见“写了但没反应”，90% 是以下三个条件没同时满足：
立即学习“前端免费学习笔记（深入）”；
- 父容器是否同时设置了
perspective和transform-style: preserve-3d？缺一不可 - 子元素是否有真正的 Z 轴操作？仅
rotateY(45deg)可以，但translateX(100px)不触发透视，translateZ(50px)若父容器没preserve-3d就被拍平 - 祖先元素是否意外触发层叠上下文？
overflow: hidden、opacity: 0.99、filter: blur(1px)都会让preserve-3d失效
rotateY 翻转卡顿/背面不显示？backface-visibility 和定位结构是关键
翻转到 90° 时正面背面重叠、文字镜像、动画中断——问题不在 perspective，而在双面结构和渲染控制。
- 正反两面都必须设
backface-visibility: hidden，否则翻转中途会看到背面内容透出 - 两面需
position: absolute+top: 0; left: 0; width: 100%; height: 100%精确重叠 - 背面元素必须显式写
transform: rotateY(180deg)初始化，否则翻转后内容方向反了 -
transition必须写在常态样式（如.card）里，不能只写在:hover中，否则首次 hover 没过渡
最易被忽略的是：perspective 和 preserve-3d 都不继承，且会被任意祖先的 transform、opacity 或 overflow 截断。调不动时，打开 DevTools 的 Layers 面板，看到带网格线的 3D 图层才说明真正跑起来了。
