bootstrap 5模态框不支持原生3d翻转，必须手动覆盖.transition逻辑：需重写.modal.fade .modal-dialog的初始态（如rotatex(-90deg)、transform-origin: top center）、显示态（rotatex(0deg)）及transition属性，并同步控制.modal-backdrop的opacity过渡。
模态框不支持原生3D翻转，必须手动覆盖.transition逻辑
Bootstrap 5 的 .modal.fade 默认只定义了 opacity 和 transform: scale() 的过渡，没有 rotateX 或 rotateY。想实现翻转效果，得彻底重写 .modal.fade .modal-dialog 的初始态、显示态和 transition 属性——不能只加个 animate__flipInX 就指望它动起来。
翻转动画必须作用在 .modal-dialog 上，且需显式声明 transform-origin
3D 翻转依赖旋转轴心点，.modal-dialog 默认居中定位，但 rotateX(180deg) 若没设 transform-origin，会绕自身中心翻，看起来像“上下对折”，不是从顶部/底部“翻开”。真实可用的写法是：
.modal.fade .modal-dialog {
transform: rotateX(-90deg) perspective(1200px);
transform-origin: top center;
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}
.modal.fade.show .modal-dialog {
transform: rotateX(0deg);
opacity: 1;
}
-
perspective(1200px)必须写在transform里（不能只靠父容器），否则 Safari 会忽略 3D 效果 -
transform-origin: top center是翻页感的关键；若要底部翻起，改用bottom center - 别用
transform-style: preserve-3d——.modal-dialog是独立渲染层，加了反而干扰层级
遮罩层（.modal-backdrop）必须同步过渡，否则视觉撕裂
如果不处理 .modal-backdrop，它会在模态框翻转到一半时“啪”地闪出来，破坏连贯性。必须单独控制它的 opacity 过渡，并确保与对话框动画时长一致：
.modal.fade .modal-backdrop {
opacity: 0;
transition: opacity 0.5s;
}
.modal.fade.show .modal-backdrop {
opacity: 0.5;
}
- 不要给
.modal-backdrop加transform——它只是纯色层，加了会引发重排抖动 - 值设为
0.5而非0.4或0.6，避免因小数精度导致部分浏览器渲染异常 - 如果用了
data-bs-backdrop="static"，也要确保该状态下的 backdrop 过渡不受影响
移动端 click 触发翻转时，需防 touchstart 重复触发
用 JS 监听 click 切换 .show 类没问题，但 iOS 和 Android 在快速连点时可能触发两次 show.bs.modal，导致翻转动画中断或错乱。稳妥做法是加节流 + 检查当前状态：
document.addEventListener('click',function(e){
if(e.target.hasAttribute('data-bs-toggle') && e.target.getAttribute('data-bs-toggle') === 'modal'){
const modal = document.querySelector(e.target.getAttribute('data-bs-target'));
if(!modal.classList.contains('show')){
// 确保只在未显示时才触发
modal.classList.add('show');
modal.setAttribute('aria-modal','true');
}
}
});
- 别依赖
show.bs.modal事件来加类——它在动画开始前触发，但此时 DOM 可能还没完全就位 - 翻转动画本身不响应
prefers-reduced-motion，如需可访问性支持，得额外监听window.matchMedia('(prefers-reduced-motion: reduce)')并降级为淡入 - Chrome DevTools 的 “Rendering” 面板里打开 “Paint flashing”，能快速发现翻转过程中是否意外触发重绘——3D 动画应只重绘
.modal-dialog区域
transform，而是让 .modal-backdrop、.modal-dialog 和键盘/触摸交互节奏完全对齐；稍有不同步，用户就会觉得“卡”或者“跳”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
