必须将 perspective 写在翻转容器的直接父容器上，且翻转容器需加 preserve-3d，正反面均需 backface-hidden 和 inset-0，否则 3D 翻转失效；推荐使用 tailwindcss-3d 插件补全缺失类。
不能直接用 Tailwind 默认类实现 3D 卡片翻转悬停特效——perspective、transform-style: preserve-3d 和 backface-visibility: hidden 这三项 CSS 属性均未内置，缺一不可。
为什么 hover:rotate-y-180 完全没反应？
常见现象：加了 hover:rotate-y-180 和 transition-transform，但悬停后卡片静止不动，或只闪一下就回弹。根本原因不是类名写错，而是浏览器压根没进入 3D 渲染上下文：
-
perspective-1000写在了翻转容器自身上（必须写在它的**直接父容器**） - 翻转容器没加
preserve-3d（Tailwind 默认不提供该类） - 正反面元素都没加
backface-hidden，导致背面内容穿透显示，视觉混乱甚至阻断动画 - 正反面未共用
inset-0或w-full h-full，旋转轴偏移，翻转中心歪斜
用 tailwindcss-3d 插件快速补全缺失能力
手动在 @layer utilities 里注册三个属性容易遗漏或冲突，推荐使用社区验证的 tailwindcss-3d（v2+，兼容当前 Tailwind v3.4+）：
- 安装：
npm install tailwindcss-3d - 配置：
tailwind.config.js的plugins数组中加入require('tailwindcss-3d') - 立即可用：
perspective-800、preserve-3d、backface-hidden、rotate-y-180等类全部生效，且与默认hover:、transition-完全兼容
HTML 结构与 class 组合必须严格分层
结构错一层，3D 就失效。最小可行结构如下（注意层级和定位）：
立即学习“前端免费学习笔记（深入）”；
<div class="perspective-800">
<div class="w-64 h-80 preserve-3d relative transition-transform duration-500 hover:rotate-y-180">
<div class="absolute inset-0 backface-hidden bg-blue-500 rounded-lg flex items-center justify-center">正面</div>
<div class="absolute inset-0 backface-hidden bg-amber-500 rounded-lg flex items-center justify-center rotate-y-180">背面</div>
</div>
</div>
- 外层：
perspective-{n}必须作用于翻转容器的**直接父容器**，值越小（如perspective-500）翻转越“陡峭”，越大越平缓 - 中间层：
preserve-3d+relative（否则absolute正反面会脱离文档流） - 正反面：
backface-hidden各自添加，且都需inset-0保证旋转轴居中；背面额外加rotate-y-180初始翻转
移动端无 hover 行为是常态，别指望 hover:rotate-y-180 在触摸设备上稳定触发；如果需要跨端一致交互，得用点击态控制 class 切换，而不是依赖伪类。
