transform

例

ハードウェアアクセラレーション

トランジションがCPUではなくGPUでレンダリングされた方がパフォーマンスが向上する場合、transform-gpuユーティリティを追加してハードウェアアクセラレーションを強制できます。

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

transform-cpuユーティリティを使用して、条件付きでこれを元に戻す必要がある場合にCPUに戻すことができます。

変換の削除

transform-noneユーティリティを使用して、要素上のすべての変換を一度に削除します。

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

カスタム値の使用

Use the transform-[<value>] 構文 to set thetransform完全にカスタムの値に基づいて

<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()`関数を自動的に追加します。