transform: rotatex(90deg) 没反应是因为缺少父容器的 perspective，3d 变换需启用 3d 渲染上下文；rotatex 默认绕中心轴翻转，要“从顶部翻下”须设 transform-origin: top center 并配合 rotatex(-90deg) 初始态。
为什么直接加 transform: rotateX(90deg) 没反应？
因为 rotateX 是 3D 变换，浏览器默认关闭 3D 渲染上下文。不设 perspective，所有 Z 轴操作都退化为 0 —— 看起来就像没动。关键不是“加了没用”，而是“根本没进 3D 空间”。
必须在父容器（通常是菜单触发器或下拉容器外层）设置 perspective，且不能写在要动画的元素自身上（否则透视原点会随元素移动，翻转错乱）。
-
perspective值建议 500–1200px：太小（如 100px）会让翻转像贴脸镜头，太大会显得僵硬 - 别用
perspective: none或0—— 这等于关掉 3D - 如果菜单是
position: absolute浮动的，确保其包含块（containing block）有perspective，否则可能失效
如何让下拉项真正“从顶部翻下来”而不是“从底部掀上去”？
翻转方向取决于旋转轴位置和初始 transform-origin。默认 transform-origin: 50% 50% 会让菜单绕中心翻，看起来像对折。要模拟“盖子掀开”，得把轴线移到顶部边缘。
- 给下拉容器设
transform-origin: top center - 初始状态用
transform: rotateX(-90deg)（背面向上，不可见），展开时过渡到rotateX(0) - 注意：
rotateX(-90deg)和rotateX(90deg)视觉效果相反，前者是“盖子合上朝上”，后者是“底板翘起朝下”，多数场景用负值 - 配合
transform-style: preserve-3d在父级（如.dropdown-menu）上启用，避免子元素扁平化
transition 为什么不触发或只动一半？
常见原因是动画属性未被浏览器视为“可过渡”。rotateX 本身可过渡，但若起始/结束状态中混用了 display: none/block，浏览器会在 display 切换瞬间中断 transition —— 翻转只执行前半程就跳没了。
- 全程用
visibility: hidden/visible+opacity: 0/1控制显隐，禁用display -
transition必须写在**始终存在的元素**上（比如下拉容器），不能只写在 hover 的触发器上 - 务必声明完整 transition：例如
transition: transform 0.4s ease, visibility 0.4s，否则 visibility 瞬变会破坏节奏 - 如果用 JavaScript 控制 class 切换，确保 class 移除/添加后浏览器有时间重排（必要时加
void el.offsetWidth强制重排）
移动端 Safari 上翻转卡顿或消失怎么办？
iOS Safari 对 3D 变换的合成策略更保守，默认可能把翻转元素降级为 CPU 渲染，导致掉帧甚至渲染丢失。这不是 bug，是性能保护机制。
- 强制开启硬件加速：给翻转元素加
transform: translateZ(0)或will-change: transform - 避免在
rotateX同时做大量box-shadow或渐变背景，这些会加剧合成负担 - 不要给
perspective父元素设overflow: hidden—— iOS 下可能裁剪 3D 投影区域 - 真机调试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Paint Flashing”，看是否频繁重绘
翻转效果的成败，往往卡在 perspective 的作用域和 transform-origin 的轴心定位上，其他都是修枝剪叶。调的时候先关掉所有 transition，用 devtools 手动切 class 看静态角度是否符合预期，再开动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
