Capítulo 26 de 29
Since v4, rotate/scale/translate/skew are each backed by their own independent CSS property (not one combined transform string) — they compose automatically without a shared transform utility, and transform-origin/perspective/transform-style round out true 3D transform support.
rotate: rotate-<number>/-rotate-<number> (deg, negatable), rotate-none, rotate-(<custom-property>)/rotate-[<value>]; 3D axis variants rotate-x-*/rotate-y-*/rotate-z-* (each composes with the others via CSS variables, so rotate-x-45 rotate-y-30 combines cleanly).
scale: scale-<number> (%, applies to both axes), negatable; scale-none; independent axis control via scale-x-*/scale-y-*/scale-z-* (same composition-by-variable pattern).
translate: translate-<number> (spacing scale, both axes), translate-<fraction> (%), translate-full, all negatable; independent translate-x-*/translate-y-* (and translate-z-* for 3D), translate-none, (<custom-property>)/[<value>] arbitrary forms.
skew: skew-<number> (both skewX+skewY, negatable), independent skew-x-*/skew-y-*, (<custom-property>)/[<value>].
transform-origin: 9-point grid (origin-center, origin-top, origin-top-right, ... origin-top-left), origin-(<custom-property>)/origin-[<value>].
transform-style (for children with their own 3D transforms): transform-3d (preserve-3d), transform-flat.
perspective (--perspective-*, sets the 3D viewing distance on the parent): perspective-dramatic(100px, most extreme) → perspective-distant(1200px, most subtle), perspective-none, (<custom-property>)/[<value>].
perspective-origin: same 9-point grid as transform-origin, applied to where the vanishing point sits.
<div class="transition-transform hover:-translate-y-1 hover:scale-105">Card</div>
<div class="perspective-normal">
<div class="transform-3d transition-transform duration-500 hover:rotate-y-180">
<div class="backface-hidden">Front</div>
<div class="absolute inset-0 rotate-y-180 backface-hidden">Back</div>
</div>
</div>
translate+scale composing on hover (no shared transform class needed since v4), and the perspective-on-parent / transform-3d+rotate-y/backface-hidden-on-child pattern for a flip card.rotate-x-45 rotate-y-30 scale-110 translate-x-4 all combine automatically on one element — no separate transform-[...] string needed, unlike pre-v4 Tailwind.transform-none no longer resets rotate/scale/translate (v4 behavior change) — reset each one individually (rotate-none, scale-none, translate-none) instead (see Upgrade Guide).perspective-* goes on the parent of the 3D-transformed element, not the element itself — a common source of "3D rotation looks flat" bugs.transform-3d (preserve-3d) is required on a parent whose children should keep their own 3D positioning instead of being flattened into the parent's plane.transition-transform/animate-spin are what typically drive these properties over time.transform) is one of the more consequential v3→v4 behavior shifts.