tailwind-syntax-3d-transforms

name	tailwind-syntax-3d-transforms
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.
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind CSS Syntax: 3D Transforms (v4-only)

Tailwind v4 introduces a complete 3D transform system: perspective-* to establish depth, transform-3d to opt children into a 3D rendering context, rotate-x/y/z-* for axis-aware rotations, translate-z-* for Z-axis offsets, and backface-hidden / backface-visible for two-sided elements. ALL of these utilities are v4-ONLY ; using them in a Tailwind v3.4 project produces no CSS and the layout stays flat.

Quick Reference

The 3D transform stack

Layer : utility : where it goes : default
Depth : perspective-* : the PARENT of the 3D scene : perspective: none (no depth)
Rendering context : transform-3d : the PARENT of the rotated elements : transform-style: flat (default)
Rotation : rotate-x-*, rotate-y-*, rotate-z-* : the rotated element itself : 0
Z-axis offset : translate-z-*, -translate-z-* : the offset element itself : 0
Two-sided : backface-visible / backface-hidden : the element with a back face : visible
Origin : perspective-origin-* : the parent that has perspective-* : center

Top 3 patterns

<!-- 1. Card flip on hover -->
<div class="group [perspective:1000px]">
  <div class="relative transition-transform duration-700 transform-3d group-hover:rotate-y-180">
    <div class="absolute inset-0 backface-hidden">Front</div>
    <div =>Back
  




  
    Front
    Back
  




  
    Lifts toward viewer on hover