变换
用于转换元素的实用工具。
类名 | 样式 |
---|---|
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()
函数。