bootstrap carousel本身不支持transform: scale()悬停缩放，硬加会导致闪烁；根本原因是缩放触发重排、.carousel-item的overflow: hidden与transform层叠冲突，而非缓动函数或原点设置问题。
直接说结论：Bootstrap Carousel 本身不支持 transform: scale() 悬停缩放，硬加会导致闪烁——根本原因是缩放触发重排 + .carousel-item 的 overflow: hidden 和 transform 层叠冲突，不是缓动函数或原点没设对的问题。
为什么给 .carousel-item 加 hover 缩放会闪烁
当你在 .carousel-item 上写 transform: scale(1.05) 并配 transition，实际触发的是两层冲突：
- Bootstrap 内部用
transform: translateX()控制轮播滑动，和你的scale()同属transform属性，浏览器必须合并计算——但 hover 状态切换瞬间，translateX和scale值不同步，导致视觉跳变； -
.carousel父容器默认有overflow: hidden，而缩放后元素尺寸超出边界，浏览器反复重绘裁剪区域，尤其在 Safari/iOS 上更明显； - 移动端 touch 事件触发 hover 状态不稳定，iOS 会模拟 hover 但延迟高，造成“缩放-回弹-再缩放”的抖动循环。
真正有效的替代方案：用伪元素隔离缩放
不碰 .carousel-item 本身，改用子容器承载缩放逻辑，避开 transform 合并问题：
- 给每个
.carousel-item内部包一层<div class="carousel-zoom">； <li>把图片/内容放进去，设置 <code>width: 100%; height: 100%； - 缩放样式只写在
.carousel-zoom上，且必须加will-change: transform触发硬件加速； - 关键：父级
.carousel-item要显式设overflow: visible，否则伪缩放会被裁掉。
示例 CSS：
.carousel-item {
overflow: visible !important;
}
.carousel-zoom {
width: 100%;
height: 100%;
transition: transform 0.25s ease;
transform-origin: center center;
will-change: transform;
}
.carousel-zoom:hover {
transform: scale(1.08);
}
iOS 上 Carousel 切换时的额外闪烁怎么治
这和悬停缩放无关，是 Bootstrap 自身动画在 Safari 的渲染缺陷。修复要点不在 CSS，而在强制重绘时机：
- 给
.carousel加backface-visibility: hidden，禁用背面优化； - 在
.carousel-item上加transform: translateZ(0)（仅 iOS 需要，Android 不需要）； - 避免同时设置
opacity和transform过渡——iOS WebKit 对混合过渡支持差，只留transform一项； - 如果用了自定义指示器或控制按钮，确保它们的
z-index高于.carousel-inner，否则点击时可能触发误判。
最易被忽略的一点：所有这些修复都依赖 .carousel-item 的尺寸稳定。如果内部图片没设 height: 100% 或用了 object-fit: cover 却没配 width: 100%，缩放时依然会因布局浮动引发重排——闪烁就藏在这里，而不是动画参数里。
