直接加 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"> -
.carousel-3d-wrapper设perspective: 1200px、transform-style: preserve-3d -
.carousel-item > *（如<img>或<div class="carousel-caption">）需设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 空间中基准线不同，会导致翻转时上下偏移：
立即学习“前端免费学习笔记（深入）”；
- 所有轮播内容（含
<img>、<video>、<div>）都加class="d-block w-100" -
.carousel-caption需额外设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则它会脱离 3D 容器流 - 若用视频，poster 图不响应
backface-visibility，得用<div>包裹整个<video>并设backface-visibility: hidden
transform 值，否则连续翻转几次后，rotateY() 会叠加成 rotateY(360deg)、rotateY(540deg)……浏览器渲染行为不可控。 
