Utilities for Transform.
Scale
Using scale-[*], you can scale an element.
You can use Arbitrary values like "scale-(1.75)" as well.
Learn more about Arbitrary Styling
Scale X
Using scale-x-[*], you can scale an element only on the x-axis.
You can use Arbitrary values like "scale-x-(1.75)" as well.
Learn more about Arbitrary Styling
Scale Y
Using scale-y-[*], you can scale an element only on the y-axis.
You can use Arbitrary values like "scale-y-(1.75)" as well.
Learn more about Arbitrary Styling
Rotate
Using rotate-[*], you can rotate an element.
You can use negative values by simply adding a "-" before the utility name,
such as "-rotate-30".
You can use Arbitrary values like "rotate-(12deg)" as well.
Learn more about Arbitrary Styling
Skew
Utilities for skewing elements with transform property.
Skew X
Using skew-x-[*], you can skew an element only on the x-axis.
Skew Y
Using skew-y-[*], you can skew an element only on the y-axis.
To use negative values simply add a "-" before the utility name,
such as "-skew-x-4".
The value of the skew-x and skew-y properties are measured in degrees (deg), so skew-x-12 means an x-axis skew magnitude of 12deg.
You can use Arbitrary values like "skew-x-(12deg)" or "skew-y-(16deg)" as well.
Learn more about Arbitrary Styling
Translate
Utilities for translating elements with transform property.
Translate X
Using translate-x-[*], you can translate an element only on the x-axis.
Translate Y
Using translate-y-[*], you can translate an element only on the y-axis.
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "translate-x-5" will give you a translate-x of 1.25rem.
To use negative values simply add a "-" before the utility name,
such as "-translate-x-4".
You can use Arbitrary values like "translate-x-(16px)" or "translate-y-(2em)" as well.
Learn more about Arbitrary Styling
Using transform-o-[*], chnage the origin for an element's transformations.