rotateX翻转入场需配合transform-style: preserve-3d（加于直接父容器）和perspective（设于外层，500px–1200px），起始帧用opacity:0;rotateX(-90deg);结束帧用opacity:1;rotateX(0);并加backface-visibility:hidden防Safari失效。
rotateX 翻转入场必须配合 transform-style 和 perspective
纯 rotateX(90deg) 在默认文档流里根本看不到翻转——元素只是绕 X 轴转，但没“景深”，浏览器把它当扁平贴图处理，转完直接脸朝里消失。真正要看到翻转过程，得让父容器产生 3D 渲染上下文。
-
transform-style: preserve-3d必须加在动画元素的**直接父容器**上，否则子元素的 3D 变换会被拍平 -
perspective建议设在更外层（比如body或 wrapper），值在500px～1200px之间较自然；设太小（如100px）会夸张变形，太大（如5000px）几乎看不出翻转感 - 别把
perspective和perspective()函数混用：前者是属性，作用于容器；后者是transform函数，只影响单个元素且优先级低，容易被覆盖
入场动画要用 animation + @keyframes，不能只靠 hover 或 JS 切 class
翻转入场本质是“从无到有+转动”，需要明确起始态（隐藏/未翻转）和结束态（可见/翻转到位）。只写 rotateX(180deg) 的 class 切换，往往卡在中间帧或直接跳变。
- 起始帧（
0%）推荐设为opacity: 0; transform: rotateX(-90deg) scale(0.95);—— 先背朝外、缩小一点，避免边缘锯齿 - 结束帧（
100%）用opacity: 1; transform: rotateX(0);，别漏掉opacity，否则翻转中途可能透出背景 - 动画时长建议 ≥
0.4s，ease-out比ease-in更符合“落定”感；太快（0.2s）像抽搐，太慢（0.8s）显拖沓
rotateX 在 Safari 上容易失效的三个硬坑
Safari 对 3D transform 的兼容策略比 Chrome 严格，尤其 iOS 16+ 和 macOS Ventura 后更明显。常见现象是元素不动、闪一下、或只翻一半就停。
- 必须给动画元素加
backface-visibility: hidden，否则 Safari 可能渲染背面为空白 - 避免父容器同时设
overflow: hidden和transform-style: preserve-3d—— 这对组合在 Safari 下常截断 3D 投影，导致翻转被裁掉 - 如果元素含文字，加上
-webkit-font-smoothing: subpixel-antialiased，不然翻转中文字边缘发虚甚至消失
要不要用 will-change？看场景再决定
will-change: transform 能提前告诉浏览器“这个元素要动了”，对复杂页面有提升，但不是万能药。
- 只在动画频繁触发（比如滚动视差、手风琴菜单）时加，静态入口页加了反而增加内存开销
- 别写在 keyframes 里，必须写在初始 CSS 规则中，例如：
.card { will-change: transform; } - Chrome DevTools 的 Rendering 面板里勾选 “Paint flashing”，能看到是否真触发了图层提升；没闪，说明
will-change没生效或没必要
翻转效果的真实感，不在角度多大，而在 perspective 的远近、起始旋转方向、以及 Safari 下那些不报错却静默失效的渲染规则。调的时候盯着真机看，比看本地预览靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
