Spatial Card Layouts 空间卡片布局 web
A card collection arranged in space so depth explains order, focus, and browsing
让卡片集合在空间中排列，用纵深解释顺序、焦点和浏览方式
Spatial card layouts
Six ways to give a card collection depth, order, and a clear focus state.
Depth stack: pull the cards apart along the z-axis.
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Spatial stage空间舞台
perspective + transform-style“The invisible space the cards live in” is the spatial stage. It establishes perspective and preserves 3D transforms without changing the content order.
“卡片所处的隐形空间”就是空间舞台。它建立透视并保留 3D 变换，同时不改变内容顺序。
Prompt fragmentPrompt 片段the spatial stage: a bounded container with perspective, transform-style: preserve-3d, overflow rules that keep cards visible, and a flat fallback on narrow screens
空间舞台：一个有界容器，使用 perspective、transform-style: preserve-3d 和合适的 overflow 规则让卡片可见，并在窄屏提供平面回退
-
2 Focused card聚焦卡片
translateZ() + z-index“The card that comes forward” is the focused card. It should gain depth and a second cue such as contrast, scale, or a visible label.
“向前走出来的那张卡片”就是聚焦卡片。除了增加纵深，还要通过对比度、尺寸或可见标签提供第二种提示。
Prompt fragmentPrompt 片段the focused card: move it forward with translateZ or translate3d, raise its z-index, and strengthen contrast or scale so depth is not the only selection cue
聚焦卡片：用 translateZ 或 translate3d 向前移动，提高 z-index，并增强对比度或尺寸，避免把深度当成唯一选中提示
-
3 Layout switcher布局切换器
aria-pressed + data-mode“The six buttons that change the arrangement” are the layout switcher. They change spatial rules while keeping the same cards and reading order.
“改变排列方式的六个按钮”就是布局切换器。它只改变空间规则，卡片内容和阅读顺序保持不变。
Prompt fragmentPrompt 片段the layout switcher: a labelled button group with aria-pressed, one active mode at a time, keyboard focus, and a status sentence explaining the current spatial relationship
布局切换器：带标签的按钮组，用 aria-pressed 表达状态，一次只激活一种模式，支持键盘焦点，并用状态句说明当前空间关系
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a spatial card layout specimen with the same six cards and six switchable modes: depth stack spread, fan spread, cylindrical layout, spherical layout, helix layout, and wave grid. Keep the card content and DOM reading order unchanged between modes. Use perspective, transform-style: preserve-3d, translate3d, rotateY, scale, and soft offset shadows to create depth. Add a labelled button group with aria-pressed for the active mode, make the focused card legible through contrast or scale as well as depth, and provide a compact one-column fallback on small screens. Honor prefers-reduced-motion by keeping the final arrangement and shortening transitions.
创建一个空间卡片布局标本，使用同一组卡片并支持六种可切换模式：深度叠层展开、扇形展开、圆柱环绕、球面排布、螺旋排布和波浪矩阵。切换模式时保留卡片内容和 DOM 阅读顺序。用 perspective、transform-style: preserve-3d、translate3d、rotateY、scale 和柔和的偏移阴影制造纵深。增加带 aria-pressed 的按钮组表示当前模式，让聚焦卡片同时通过对比度或尺寸变化变得清晰，并在小屏幕上提供紧凑的单列回退。尊重 prefers-reduced-motion，保留最终排列并缩短过渡。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my spatial card layout (six CSS 3D browsing modes). Rule out: cards disappearing because the perspective stage clips or overflow hides the depth; visual order diverging from DOM order; every card competing with the focused card; transforms being overwritten by a shared shorthand; layout buttons without aria-pressed or keyboard focus; 3D movement becoming the only selection cue; mobile overflow from fixed offsets; and reduced-motion users still receiving long spatial transitions. The symptom:
调试我的空间卡片布局（六种 CSS 3D 浏览模式）。逐项排除：透视舞台裁剪或 overflow 隐藏导致卡片消失；视觉顺序和 DOM 顺序不一致；所有卡片都在抢聚焦位置；共享 shorthand 覆盖了单张卡片的 transform；布局按钮没有 aria-pressed 或键盘焦点；3D 运动成为唯一的选中提示；固定偏移造成移动端横向溢出；减少动态效果用户仍然收到很长的空间过渡。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | perspective + transform-style: preserve-3d | the depth stage that lets cards separate along the z-axis让卡片沿 z 轴分开的纵深舞台 |
| CSS | translate3d() + rotateY() | position each card in a fan, ring, sphere, helix, or wave把每张卡片放进扇形、圆环、球面、螺旋或波浪中 |
| JS | aria-pressed + data-mode | switch layouts without changing the card content or DOM order不改变卡片内容和 DOM 顺序地切换布局 |
| A11y | prefers-reduced-motion | keep the selected arrangement while shortening spatial transitions缩短空间过渡，同时保留选中的最终排列 |