transform

示例(Examples)

硬件加速(Hardware acceleration)

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

🌐 If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the transform-gpu utility:

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

如果需要有条件地撤销此操作，请使用 transform-cpu 工具将内容强制返回到 CPU。

🌐 Use the transform-cpu utility to force things back to the CPU if you need to undo this conditionally.

删除转换(Removing transforms)

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

🌐 Use the transform-none utility to remove all of the transforms on an element at once:

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

使用自定义值(Using a custom value)

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