hover:rotate-y-180无效是因为缺少perspective（须设于父容器）、preserve-3d（须设于翻转盒）和backface-hidden（正反面均需），三者缺一即退化为2D旋转，无法启用3D渲染上下文。
直接用 Tailwind 默认类写 hover:rotate-y-180 是不会翻转的——缺了 perspective、preserve-3d 和 backface-hidden 三个关键支撑，浏览器根本不会启用 3D 渲染上下文。
为什么 hover:rotate-y-180 完全没反应？
这是最常卡住的地方：你以为加了 hover 和 transition 就够了，其实底层 CSS 3D 环境压根没搭起来。
-
perspective-{n}必须写在**翻转盒子的直接父容器**上（比如外层<div>），写在翻转盒子自身上无效 - 翻转盒子自己必须带
preserve-3d，否则浏览器按平面处理，rotate-y只是二维旋转 - 正反两面都得加
backface-hidden，否则背面内容会穿透显示，视觉错乱甚至“卡半截” - 正反面若没用
inset-0或w-full h-full，旋转轴会偏移，导致翻转中心歪斜、动画抖动
用 tailwindcss-3d 插件补全缺失能力
手动在 @layer utilities 里注册那三个属性太容易漏配或拼错，插件是最稳的路径。
- 安装：
npm install tailwindcss-3d - 配置：
tailwind.config.js的plugins数组中加入require('tailwindcss-3d') - 立即可用：
perspective-1000、preserve-3d、backface-hidden、rotate-y-180全部就位，和默认transition、hover:无冲突
HTML 结构必须严格三层嵌套
结构错一层，3D 就失效。不是语义问题，是浏览器渲染规则强制要求。
立即学习“前端免费学习笔记（深入）”；
- 外层：仅设
perspective-1000（或其他值） - 中间层：加
preserve-3d relative transition-transform duration-500 hover:rotate-y-180——relative不可少，否则内部absolute定位失效 - 正反面：都用
absolute inset-0 backface-hidden，背面额外加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: 基本不可靠，别指望它触发。需要点击交互，就得换方案：
- 用
active:rotate-y-180配合transition-transform，但只适用于短按反馈，松手即回弹 - 更可靠的是用 Vue/React 控制一个
isFlipped状态，绑定rotate-y-180类；纯 HTML/CSS 可用隐藏<input type="checkbox">+:checked ~ .card选择器模拟，但需注意 Safari 对~的兼容性 - 别忽略
transform-origin：Tailwind 默认不提供，如需从左侧翻开（书页效果），得手写transform-origin-left工具类并注入
真正难的不是写对那几行 class，而是理解 perspective 是作用域敏感的、preserve-3d 是开关级的、backface-hidden 是每个面独立要加的——三者缺一，3D 就塌成 2D。
