transform

Utilities for transforming elements.

Examples

Hardware acceleration

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:

<!-- [!code classes:transform-gpu] -->
<div class="scale-150 transform-gpu">
  <!-- ... -->
</div>

Use the transform-cpu utility to force things back to the CPU if you need to undo this conditionally.

Removing transforms

Use the transform-none utility to remove all of the transforms on an element at once:

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

Using a custom value