用途:在 Tailwind CSS v4 中构建 3D 效果,如卡片翻转动画、3D 立方体、3D 轮播、产品展示、悬停揭示与类视差景深。所有相关工具类均为 v4 独有,在 v3.4 项目中使用不会生成 CSS,布局保持扁平。
主要能力:perspective-* 在父元素建立景深;transform-3d 让子元素进入 3D 渲染上下文;rotate-x/y/z-* 做轴向旋转;translate-z-* 做 Z 轴偏移;backface-hidden / backface-visible 控制双面元素;perspective-origin-* 设置透视原点。透视关键字默认值:perspective-dramatic 100px、perspective-near 300px、perspective-normal 500px、perspective-midrange 800px、perspective-distant 1200px、perspective-none 关闭。
使用方式:按顺序设置——父元素加 perspective 工具类,父元素或内层包裹加 transform-3d,子元素加旋转/位移,卡片翻转时两个面都加 backface-hidden。可用任意值如 perspective-[1000px]、rotate-y-[60deg],或在 @theme 中定义 --perspective-brand 后用 perspective-(--perspective-brand)。响应式可写 perspective-none md:perspective-near。
适用场景:卡片翻转、3D 立方体、悬停抬升、3D 轮播、主题化透视、移动端禁用 3D。
限制:仅支持 Tailwind v4;缺少父级 perspective 或 transform-3d 会导致渲染扁平;默认旋转刻度为 0、1、2、3、6、12、45、90、180,60 度等需用任意值;具体浏览器兼容与性能表现资料未提供。