Tailwind 默认不支持 translateZ() 是因为其 transform 工具类未启用 3D 上下文，需配合 perspective-{n}、transform-gpu 及自定义 translate-z-{n} 类才能生效，并注意移动端无 :hover 触发。
为什么直接用 transform: translateZ() 在 Tailwind 里无效
Tailwind 默认的 transform 工具类（如 translate-x-2、rotate-3）只生成 transform: translateX(...) 或 rotate(...)，不包含 translateZ() —— 因为它需要 3D 渲染上下文才能生效，而 Tailwind 的默认 transform 类没启用 perspective 和 transform-style: preserve-3d。
这意味着光写 hover:translate-z-4 不会起作用：该类根本不存在，且即使手动加了 translateZ(4px)，父容器若没设 perspective，浏览器也不会触发 3D 渲染管线。
- 必须显式在父容器上设置
perspective（比如perspective-1000） - 父容器需加
transform-style: preserve-3d（Tailwind 中对应transform-gpu+ 自定义 class 或内联 style） - 子卡片需用
transform: translateZ()+translateX/Y组合模拟视差，不能只靠 Z 轴
用 transform-gpu + 自定义 perspective 快速启用 3D 上下文
Tailwind 的 transform-gpu 本质是 transform: translateZ(0)，它强制硬件加速并**隐式创建一个扁平化 3D 上下文**，但不足以支撑多层深度。真正需要的是在父容器上加 perspective 值，并确保子元素能“感知”深度。
推荐做法：用 Tailwind 内置的 perspective-{n}（如 perspective-1000）配合 transform-gpu 和自定义 hover transform：
<div class="perspective-1000">
<div class="transform-gpu transition-transform duration-300 hover:translate-x-1 hover:translate-y-1 hover:translate-z-4">
卡片内容
</div>
</div>
注意：perspective-1000 对应 perspective: 1000px，数值越小视差越夸张，建议 500–2000 范围内调试；translate-z-4 需要自己扩展（见下一点）。
如何添加 translate-z-{n} 工具类（不改配置文件）
Tailwind 默认不提供 translate-z 类，但你不需要动 tailwind.config.js 就能临时支持——用 style 属性或 @apply 写在组件内更轻量。
- 最简方案：在卡片上直接写内联
style="transform: translateZ(6px)"，hover 时用hover:style（需开启hover:style插件，但不推荐） - 更稳妥方案：用
@layer utilities在 CSS 文件中追加（无需重启 dev server）：
@layer utilities {
.translate-z-2 { transform: translateZ(2px); }
.translate-z-4 { transform: translateZ(4px); }
.translate-z-6 { transform: translateZ(6px); }
}
然后就能安全使用 hover:translate-z-4，且和 translate-x/translate-y 同时生效（它们共用同一个 transform 声明）。
真实视差效果的关键：不同层级用不同 translateZ 值
纯“悬浮”只是抬高卡片，真视差是让卡片内元素（如标题、图片、阴影）以不同速率移动 —— 比如标题移得少，背景图移得多，制造景深感。
做法是给子元素分别设不同 translateZ，并统一父容器 perspective：
<div class="perspective-800">
<div class="transform-gpu">
<h3 class="transform-gpu hover:translate-z-2">标题</h3>
@@##@@
</div>
</div>
这里 hover:translate-z-6 的图片比标题“更靠近用户”，视觉上就产生了前后分离。务必注意：transform-gpu 必须加在每一层，否则子元素的 3D transform 会被父级扁平化掉。
容易被忽略的一点：移动端 touch 事件不会触发 :hover，如果要兼容，得用 JavaScript 监听 mousemove 动态更新 style.transform，纯 CSS 方案只适用于桌面端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
