Hover 3D 悬浮 3D

Hover 3D 负责把第一层内容面板变成一个会随着鼠标位置倾斜的 3D surface。现在除了展示基础的 8 个命中区，也提供了链接语义、surface wrapper 与根节点属性透传。

结构

1 + 8

第一层是倾斜面板，后 8 层由组件自动补充 hover zones。

语义

href → a

传入 href 后默认切到链接根节点，整卡跳转不必再手写外层 a 标签。

组合

surface

用 surfaceAs、surfaceClassName、surfaceProps 精准控制第一层面板。

非交互内容优先整块点击用根节点承接不要手写 8 个空 div

内部 children 尽量保持非交互。如果整块需要点击，直接让 Hover3D 自己渲染为链接根节点，避免在倾斜面板里再嵌按钮或链接。

# 基础图片悬浮

展示基础图片示例，用最直接的 1 + 8 结构工作。

展示基础整卡链接示例，并改成只传 href 就能得到链接根节点。

Hover the whole surface to read the motion.

Click stays on the wrapper instead of nested controls.

用 surfaceAs 与 surfaceClassName 精简第一层结构，避免为了 figure 或 article 再手写外壳。

展示基础多图示例，并补上统一的排版、标题和标签信息。

motion

展示基础单图 3D 结构，并给画廊增加统一的标题与标签层。

editorial

适合做作品墙、专题入口或横向卡片集合。

poster

根节点仍然只是 Hover3D，自身不需要再额外写 8 个空 div。

除下表外，其余 HTML 属性会透传给根节点。

属性	说明	类型	默认值
`as`	指定根节点标签，可选 div 或 a；未传时，传入 href 会自动切成 a	`'div' \| 'a'`	`'div'`
`className`	追加到根节点的类名	`string`	`-`
`href`	链接地址；与 target、rel 一起控制链接根节点	`string`	`-`
`overlayClassName`	追加到 8 个 hover zone 的类名	`string`	`-`
`overlays`	是否自动生成 8 个 hover zone	`boolean`	`true`
`rel`	链接 rel；target 为 _blank 且未传时会补上 noreferrer	`string`	`-`
`surfaceAs`	为第一层倾斜面板指定包装标签，例如 figure 或 article	`'div' \| 'figure' \| 'article' \| 'section'`	`-`
`surfaceClassName`	追加到第一层倾斜面板的类名	`string`	`-`
`surfaceProps`	透传给第一层倾斜面板的额外 HTML 属性	`Record<string, any>`	`-`
`target`	链接目标窗口，仅 a 根节点生效	`string`	`-`