transform

示例

硬件加速

如果你的过渡动画在使用 GPU 渲染时比 CPU 渲染表现更好，你可以通过添加 transform-gpu 实用工具类来强制硬件加速

<div class="scale-150 transform-gpu">
  <!-- ... -->
</div>

如果你需要有条件地撤销此操作，可以使用 transform-cpu 实用类来强制回到 CPU 渲染。

移除变换

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

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

使用自定义值

使用 transform-[<value>] 语法 来设置transform基于完全自定义的值

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

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

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

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