Tailwind CSS中translate-z-[100px]不生效问题求助

核心问题分析 #

你的代码未生效主要存在两个关键缺失：

• 缺少透视容器（perspective）：3D变换需要父元素提供透视空间，否则浏览器会将所有变换扁平化处理，z轴位移无法呈现效果。
• transform-style-3d应用位置错误：该类需设置在父容器上，而非每个子元素，用于开启子元素的3D空间继承。

修正后的完整代码示例 #

先给父容器添加必要属性，再保留子元素的3D变换设置：

<!-- 父容器：必须设置透视、3D变换样式、相对定位 -->
<div class="relative perspective-[500px] transform-style-3d w-full h-[300px] flex items-center justify-center">
  <span class="absolute whitespace-nowrap translate-x-[-50%] translate-y-[-50%] rotate-x-[0deg] translate-z-[100px]"> Hello World</span>
  <span class="absolute whitespace-nowrap translate-x-[-50%] translate-y-[-50%] rotate-x-[72deg] translate-z-[100px]"> Hello World</span>
  <span class="absolute whitespace-nowrap translate-x-[-50%] translate-y-[-50%] rotate-x-[144deg] translate-z-[100px]"> Hello World</span>
  <span class="absolute whitespace-nowrap translate-x-[-50%] translate-y-[-50%] rotate-x-[216deg] translate-z-[100px]"> Hello World</span>
  <span class="absolute whitespace-nowrap translate-x-[-50%] translate-y-[-50%] rotate-x-[288deg] translate-z-[100px]"> Hello World</span>
</div>

关键配置说明 #

• perspective-[500px]：设置透视距离，数值越小3D视觉效果越强烈，可按需调整。
• transform-style-3d：开启父容器的3D空间，让子元素的3D变换生效（对应CSS原生属性transform-style: preserve-3d）。
• relative：让子元素的绝对定位基于该父容器，确保translate-x-[-50%] translate-y-[-50%]实现正确居中。

额外检查点 #

1. 你的tailwind.config.js插件配置是正确的，无需修改。
2. 排查是否有其他CSS规则破坏3D空间，比如父元素的overflow:hidden、transform: flat等属性会导致3D变换失效。

内容的提问来源于stack exchange，提问作者Mostafa Hosseini