| description | Use when building 3D effects in Tailwind v4: card-flip animations, 3D carousels, product showcases, hover-reveal effects, parallax-like depth, or any layout that requires elements to rotate or translate along the Z axis. Use also when an existing v3 project is migrating to v4 and adopting depth effects for the first time, or when reading v4 markup that contains `transform-3d`, `perspective-*`, `rotate-x-*`, `rotate-y-*`, `rotate-z-*`, `translate-z-*`, or `backface-hidden` and needing to know what each utility does and what its parent must declare. Prevents (a) applying 3D rotations without declaring `perspective-*` on the parent, which renders flat with no depth, (b) forgetting `transform-3d` on the parent of a 3D scene, which collapses children into 2D space, (c) leaving the back of a card-flip element visible during the flip because `backface-hidden` was omitted, (d) reaching for these utilities in a Tailwind v3.4 project where NONE of the 3D-axis utilities exist (they compile to nothing and the layout silently stays flat), (e) confusing the v3 single-axis `rotate-45` with v4 `rotate-z-45` (they produce identical CSS but v4 also offers `rotate-x-45` and `rotate-y-45` for 3D scenes), and (f) putting `perspective-*` on the same element being rotated (perspective MUST live on the parent of the rotated element). Covers the complete v4 3D transform system: `transform-3d` vs `transform-flat` for the rendering context, the six `perspective-*` keyword utilities (perspective-none, perspective-dramatic 100px, perspective-near 300px, perspective-normal 500px, perspective-midrange 800px, perspective-distant 1200px), arbitrary `perspective-[800px]` and CSS-var `perspective-(--my-perspective)`, the three rotation axes `rotate-x-*`, `rotate-y-*`, `rotate-z-*` with the default number scale (0, 1, 2, 3, 6, 12, 45, 90, 180), negative `-rotate-y-30` and arbitrary `rotate-x-[45deg]` forms, `translate-z-*` for Z-axis offset (matches the spacing scale), `backface-visible` / `backface-hidden` for two-sided flipping cards, perspective-origin utilities, and the complete card-flip plus 3D-carousel example patterns. ALL utilities here are Tailwind v4-only. Keywords: 3D transform, transform-3d, transform-style, preserve-3d, perspective, perspective-dramatic, perspective-near, perspective-distant, rotate-x, rotate-y, rotate-z, translate-z, z-axis, backface-hidden, backface-visible, card flip, flip card, 3D carousel, depth effect, product showcase, hover reveal, parallax, why does my rotation look flat, no depth, 2D fallback, v4 only utility, 3D rendering context, perspective-origin, rotate around X axis, rotate around Y axis, Tailwind v4 features, Tailwind 4 3D, modern utilities.
|
