Transform
import { ApiTable } from "@/components/api-table.tsx"; import { UsingACustomValue } from "@/components/content.tsx";
export const title = "transform"; export const description = "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>