1. 变换
  2. transform

变换

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 实用工具类来强制硬件加速

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策