transform

用于变换元素的工具类。

快速参考

类	属性
`transform-(<custom-property>)`	`transform: var(<custom-property>);`
`transform-[<value>]`	`transform: <value>;`
`transform-none`	`transform: none;`
`transform-gpu`	`transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);`
`transform-cpu`	`transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);`

如果过渡在 GPU 而非 CPU 上渲染时效果更好，可以添加 transform-gpu 工具类来强制硬件加速：

html

<!-- [!code classes:transform-gpu] -->
<div class="scale-150 transform-gpu">
  <!-- ... -->
</div>

如果需要有条件地撤销该行为，可使用 transform-cpu 工具类强制切回 CPU。

使用 transform-none 工具类，一次性移除元素上的所有变换：

html

<!-- [!code classes:transform-none] -->
<div class="skew-y-3 md:transform-none">
  <!-- ... -->
</div>

使用 transform-[<value>] 等工具类，根据完全自定义的值设置变换：

html

<div class="transform-[matrix(1,2,3,4,5,6)] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 transform-(<custom-property>) 语法：

html

<div class="transform-(--my-transform) ...">
 <!-- ... -->
</div>

这只是 transform-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。