rotateY动画需配合perspective、transform-style: preserve-3d和backface-visibility: hidden三者缺一不可，且须正确作用于对应层级，否则仅呈现二维缩放或闪烁。
rotateY动画必须配合transform-style: preserve-3d
只写 rotateY(180deg) 不会看到翻转效果，因为默认子元素扁平化渲染。父容器不加 transform-style: preserve-3d，子元素的Z轴变换会被压平，翻转后看起来像镜像缩放，而不是真实翻面。
常见错误现象：rotateY 动画执行时元素“突然消失”或“闪一下又回来”，大概率是父级缺少该声明。
- 必须在触发翻转的**直接父容器**上设置
transform-style: preserve-3d - 该属性对
transform有继承限制——不会自动传递给孙子级，多层嵌套时需逐级确认 - 部分旧版 Safari（iOS 9–12）对
preserve-3d支持不稳定，若需兼容，建议用backface-visibility: hidden强制启用3D上下文
perspective值不是越大越好，要匹配容器尺寸
perspective 决定“镜头距离”，值越小，3D透视感越强（边缘拉伸明显），值越大越接近平面旋转。设成 1000px 在小卡片上会显得翻转僵硬，设成 100px 在大屏横幅里又容易畸变。
使用场景：卡片翻转、菜单展开、图片悬停切换。关键不是固定数值，而是与元素宽高形成合理比例。
立即学习“前端免费学习笔记（深入）”；
- 常用经验区间：
perspective: 600px~1200px，适用于宽度 200–400px 的卡片 - 务必把
perspective写在**翻转容器的父级**（不是动画元素本身），否则无效 - 不能和
transform写在同一行用空格拼接；perspective是独立 CSS 属性，不是transform函数
backface-visibility: hidden 是防闪烁的刚需
翻转到背面时，若背面内容未隐藏，浏览器可能同时渲染正反两面，造成重影、闪烁或点击穿透（比如翻转后还能点到背面按钮）。这不是 bug，是标准渲染行为。
错误写法：div { transform: rotateY(180deg); } —— 没加 backface-visibility，背面始终可见。
- 必须为**参与翻转的每个子元素**（正面/背面）单独设置
backface-visibility: hidden - 它不解决透视问题，也不替代
preserve-3d，三者缺一不可：perspective（镜头）、preserve-3d（空间）、backface-visibility（面片开关） - 某些安卓 WebView 中，即使写了也失效，可临时加
will-change: transform触发硬件加速
@keyframes里rotateY别漏写单位，且慎用from/to
@keyframes flip { from { transform: rotateY(0); } to { transform: rotateY(180); } } 这种写法在 Chrome 115+ 和 Safari 17+ 会失败——rotateY 后面没单位（deg/rad）时，现代浏览器已拒绝解析。
性能影响：用 from/to 虽简洁，但不利于控制中间态（比如想在 50% 停顿、加阴影变化）；用百分比更灵活，也方便调试。
- 必须写单位：
rotateY(0deg)、rotateY(180deg)，不能省略deg - 避免只依赖
from/to，至少写0%, 50%, 100%三层，方便后续加过渡效果 - 不要在 keyframes 里写
perspective或transform-style，它们不支持动画，只支持静态声明
perspective → 父容器 transform-style: preserve-3d → 子元素分别设 backface-visibility: hidden → 动画用带单位的 rotateY()。少一步，翻转就只是个二维假动作。 
