Tailwind CSS v4 默认不提供 perspective、preserve-3d、backface-hidden 等 3D 变换必需类，因其设计哲学坚持高频、解耦、可组合的原子类原则，而 3D 变换需强耦合的属性链（perspective→preserve-3d→backface-hidden），无法由单个 rotate-y 类覆盖；即使支持 transform-gpu，也仅优化位移性能，不自动注入 3D 上下文。
Tailwind CSS v4 默认不提供 perspective、preserve-3d、backface-hidden 这类 3D 变换必需的样式类，必须手动扩展或借助插件——直接写 rotate-y-180 或 transform-gpu 不会触发真正的 3D 渲染。
为什么 v4 仍需手动处理 3D 类？
v4 虽用 Lightning CSS 替代了 PostCSS，但设计哲学未变：只暴露高频、解耦、可组合的原子类。而 3D 变换依赖强耦合属性链：perspective（父容器）、transform-style: preserve-3d（中间包裹层）、backface-visibility: hidden（正反面各自设置），无法靠单个 rotate-y 衍生类覆盖。
即使 v4 支持 transform-gpu（启用 translate3d），它仅优化位移性能，不自动注入 preserve-3d 或 perspective。
用 tailwindcss-3d 插件快速补全（推荐）
社区验证过的 tailwindcss-3d（v2+）与 v4 兼容，无需修改构建流程，只需两步：
立即学习“前端免费学习笔记（深入）”；
- 安装：
pnpm add -D tailwindcss-3d - 在
tailwind.config.mjs的plugins中加入：require('tailwindcss-3d')
插件会注册以下关键类：
-
perspective-{n}（如perspective-800）→ 必须加在外层容器上 -
preserve-3d→ 必须加在直接包裹正反面的元素上 -
backface-hidden→ 正反面各自添加 -
rotate-y-180等旋转类 → 与默认transition、hover:完全兼容
手动扩展配置（无插件场景）
若因项目约束不能引入第三方插件，可在 tailwind.config.mjs 中手动扩展：
export default {
theme: {
extend: {
transform: {
'preserve-3d': 'preserve-3d',
},
perspective: {
'800': '800px',
},
'backface-visibility': {
'hidden': 'hidden',
},
},
},
plugins: [
function ({ addUtilities }) {
addUtilities({
'.perspective-800': { perspective: '800px' },
'.preserve-3d': { 'transform-style': 'preserve-3d' },
'.backface-hidden': { 'backface-visibility': 'hidden' },
})
}
]
}
注意：addUtilities 注册的是完整 CSS 块，不是变量映射；perspective 和 backface-visibility 不在默认 theme.extend 键中，必须显式声明或用 addUtilities 注入。
结构与 class 组合必须严格分层
哪怕类名全对，结构错一层，3D 效果就失效。最小可行 HTML 结构如下：
<div class="perspective-800">
<div class="w-64 h-48 preserve-3d transition-transform duration-500 hover:rotate-y-180">
<div class="absolute inset-0 backface-hidden bg-blue-500 flex items-center justify-center">正面</div>
<div class="absolute inset-0 backface-hidden bg-amber-500 flex items-center justify-center rotate-y-180">背面</div>
</div>
</div>
常见错误：
- 把
perspective-800写在.preserve-3d容器上 → 浏览器忽略 - 漏掉
backface-hidden→ 翻转时正反面同时可见，出现“双影” - 没加
transform-gpu或transform→ 旋转类不生效（v4 中rotate-y-180依赖基础transform类启用）
最易被忽略的是：v4 默认不强制启用 transform 基础类，必须显式写 transform 或 transform-gpu 才能让所有旋转/缩放类起作用——这点和 v3 一致，但文档里藏得更深。
