轉換
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() 函式。
