直接加 carousel-3d 类没反应，因为 bootstrap 官方 css 中不存在该预设类；3d 翻转需手动构建 3d 渲染上下文、包裹容器、js 状态控制及内容统一处理。
为什么直接加 carousel-3d 类没反应
Bootstrap 官方 CSS 里根本不存在 carousel-3d 这类预设类——3D 翻转切换是纯手写效果，不是框架内置功能。所有“Bootstrap 3D 轮播”教程实际都是在 .carousel-item 上叠加自定义 3D 变换，但容易因 DOM 结构或渲染上下文缺失而完全失效。
.carousel-item 必须包裹在独立的 3D 容器里
直接对 .carousel-item 写 transform: rotateY(180deg) 不会翻转，因为缺少 3D 渲染上下文。必须用一个新容器包裹每个轮播项，并设 perspective 和 transform-style: preserve-3d：
-
.carousel-inner保持原样（position: relative），不加perspective - 每个
.carousel-item内部再包一层<div class="carousel-3d-wrapper"> <li> <code>.carousel-3d-wrapper设perspective: 1200px、transform-style: preserve-3d -
.carousel-item > *（如<img>或<div class="carousel-caption">）需设 <code>backface-visibility: hidden翻转动画必须由 JS 控制状态类，不能只靠
:hover移动端无法可靠触发
:hover，且轮播需要精确控制哪一项翻转、何时翻转。Bootstrap 的slide.bs.carousel事件才是正确入口：- 监听
slid.bs.carousel（切换完成后再执行翻转，避免状态冲突） - 给当前
.active项的.carousel-3d-wrapper加class="is-flipped" - 翻转动画写在非状态类上：
.carousel-3d-wrapper { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } -
.is-flipped只负责transform: rotateY(180deg)，不写transition
图片和文字内容必须统一处理，否则翻转错位
默认
<img>是 inline 元素，<div class="carousel-caption"> 是 block，两者在 3D 空间中基准线不同，会导致翻转时上下偏移： <ul><li>所有轮播内容（含 <code><img>、<video></video>、<div>）都加 <code>class="d-block w-100" - 监听
-
.carousel-caption需额外设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则它会脱离 3D 容器流 - 若用视频，poster 图不响应
backface-visibility，得用<div> 包裹整个 <code><video></video>并设backface-visibility: hidden3D 翻转最易被忽略的是：每次切换后必须重置前一项的transform值，否则连续翻转几次后，rotateY()会叠加成rotateY(360deg)、rotateY(540deg)……浏览器渲染行为不可控。
