变换
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); |
示例(Examples)
¥Examples
硬件加速(Hardware acceleration)
¥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)
¥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)
¥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() 函数。