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() 函数。