Translate-z-[100px] 在 Tailwind css 中不起作用

Question

我使用以下代码在 Tailwind 中进行 3-d 旋转：

<span className='absolute whitespace-nowrap transform-style-3d translate-x-[-50%] translate-y-[-50%] rotate-x-[0deg] translate-z-[100px]'> Hello World</span>
<span className='absolute whitespace-nowrap transform-style-3d translate-x-[-50%] translate-y-[-50%] rotate-x-[72deg] translate-z-[100px]'> Hello World</span>
<span className='absolute whitespace-nowrap transform-style-3d translate-x-[-50%] translate-y-[-50%] rotate-x-[144deg] translate-z-[100px]'> Hello World</span>
...

但是z轴上没有发生任何变化。顺便说一句，我安装了“npm install -D tailwindcss-3d”并将其添加到tailwind.config.js文件中：

 plugins: [ require('tailwindcss-3d')],

谢谢！

Answer 1

根据 TranslateZ 上的 MDN 指南，为了使

translate-z

转换发挥作用，该元素必须包装在应用了 perspective CSS 属性的父元素中。此外，沿 z 轴变换的元素需要将

transform-style

属性设置为

preserve-3d

。

在 Tailwind CSS 中，可以按如下方式实现：

<div class="perspective-500">
  <span class='absolute whitespace-nowrap transform-style-3d translate-x-[-50%] translate-y-[-50%] rotate-x-[144deg] translate-z-[100px]'> Hello World</span>
</div>

您可以在这里使用代码：https://play.tailwindcss.com/TrYnA3H7UU