perspective必须作用于父容器并配合transform-style: preserve-3d才能实现真实3d感；单独加在变换元素自身无效，且需结合backface-visibility: hidden避免背面重叠闪烁。
perspective 不是开关，写上去不等于有3D感；它必须和 transform-style: preserve-3d 配合、加在正确父容器上，否则所有 rotateX/rotateY/translateZ 都只是平面动画。
perspective 必须设在父容器上，不能加在要动的元素自身
很多人把 perspective: 1000px 直接写在 .card 或 .cube 上，结果 hover 时只有旋转，没有近大远小——因为 perspective 定义的是「观察者眼睛到 z=0 平面的距离」，它只对**子元素**生效，且需由父级提供统一视觉原点。
- ✅ 正确结构：
.scene { perspective: 1000px; transform-style: preserve-3d; }，再让.card做transform: rotateY(180deg) - ❌ 错误写法：
.card { perspective: 1000px; transform: rotateY(180deg); }→ 浏览器忽略perspective，旋转无缩放 - ⚠️ 移动端 Safari 对位置极其敏感：若用
body或html当容器，可能引发position: fixed元素错位，务必单独包裹一层如.scene
transform-style: preserve-3d 只对直系子元素生效
它的作用不是“开启 3D”，而是阻止浏览器把子元素拍平到同一 Z=0 平面。但它不穿透嵌套，加错位置等于没加。
- ✅ 正确：加在直接包裹正反面/六个面的容器上，例如
.card或.cube - ❌ 错误：加在
.card-front或.mian1上——它们是叶子节点，没有子元素需要“保持 3D” - ⚠️ 常见干扰：
overflow: hidden的祖先会裁掉翻转中伸出的部分；transform-style: flat（默认值）的上级容器也会覆盖效果
backface-visibility: hidden 必须同时作用于正反两面
翻转到 180° 时，正面和背面在空间中重叠。不隐藏背面，Chrome/Safari 会同时渲染两层，导致文字重影、颜色发灰，甚至 iOS 上直接显示空白。
- ✅ 必须写：
.card-front, .card-back { backface-visibility: hidden; } - ❌ 只加在容器上无效；加在
:hover里更不行——它得始终生效 - ⚠️ 旧版 iOS Safari 支持不稳定；若翻转后消失，可补一句
transform: translateZ(0)强制触发 GPU 渲染
perspective 值怎么选：不是越大越好，也不是越小越稳
它决定你“站得多近”，直接影响 translateZ 和 rotate 的视觉缩放比例，而非是否启用 3D。单位只能是 px 或 rem；%、em 无效。
-
perspective: 300px：像凑近手机看，translateZ(50px)就明显放大，但translateZ(200px)可能超出视距而消失 -
perspective: 1000px：推荐起始值，适配多数卡片/魔方类场景，兼顾自然感与可控性 -
perspective: 5000px：接近正交投影，rotateX看起来像倾斜，translateZ几乎看不出前后差异
写了 perspective 还没效果？先查这三件事：父容器是否同时设置了 perspective 和 transform-style: preserve-3d；子元素是否有真正的 Z 轴操作（比如 translateZ(50px)，不是仅 rotateY）；祖先是否意外触发层叠上下文（overflow: hidden、opacity: 0.99、filter: blur(1px) 都会让 preserve-3d 失效）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
