tailwind css 默认不支持卡片 3d 翻转，因 perspective、preserve-3d 和 backface-hidden 缺失；hover:rotate-y-180 无效主因是 3d 渲染上下文未建立——perspective 必须加在父容器，preserve-3d 需插件补充，正反面均需 backface-hidden 与 inset-0 对齐旋转轴；推荐使用 tailwindcss-3d 插件并严格遵循三层嵌套结构。
Tailwind CSS 默认不支持卡片 3D 翻转——perspective、transform-style: preserve-3d 和 backface-visibility: hidden 这三个属性缺一不可，而它们都不在默认工具类中。
为什么 hover:rotate-y-180 完全没反应？
这是最常卡住的地方：写了类但动画不动，或只闪一下就回弹。根本原因不是 Tailwind “不支持”，而是 3D 渲染上下文没建立起来。
-
perspective-1000必须加在**翻转盒子的直接父容器**上；写在翻转盒子自身上无效 - 翻转盒子自身必须有
preserve-3d（Tailwind 默认不提供，需插件或手动注册） - 正反两面都要加
backface-hidden，否则背面内容会穿透显示，视觉混乱 - 正反面若没用
inset-0或等效的top-0 left-0 w-full h-full，旋转轴会偏移，导致翻转歪斜
用 tailwindcss-3d 插件补全缺失能力
手动注册三类样式容易漏、难维护，推荐直接用社区验证过的 tailwindcss-3d（v2+ 兼容当前 Tailwind v4）。它不覆盖原有类，只注入必需的 3D 支持。
- 安装：
npm install tailwindcss-3d - 配置：
tailwind.config.js的plugins数组中加入require('tailwindcss-3d') - 立即可用：
perspective-800、preserve-3d、backface-hidden、rotate-y-180等类名即刻生效
HTML 结构必须严格三层嵌套
结构错一层，3D 就失效。这不是可选建议，是浏览器渲染引擎的硬性要求。
- 外层：仅设
perspective-{n}，不加其他 transform 或定位 - 中层：加
preserve-3d relative transition-transform duration-500 hover:rotate-y-180，且必须是relative（否则内部absolute正反面会脱离文档流） - 内层（正反面）：都用
backface-hidden absolute inset-0，背面额外加rotate-y-180
示例最小可行结构：
<div class="perspective-1000">
<div class="preserve-3d relative w-64 h-80 transition-transform duration-500 hover:rotate-y-180">
<div class="backface-hidden absolute inset-0 bg-blue-500 rounded-lg flex items-center justify-center">正面</div>
<div class="backface-hidden absolute inset-0 bg-amber-500 rounded-lg flex items-center justify-center rotate-y-180">背面</div>
</div>
</div>
移动端没有 :hover，所以翻转不会自动触发；如果需要触控交互，得用 JavaScript 切换类，而不是依赖伪类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
