Book3D
book-3d3D 立体书 · CSS 3D transform 透视书体(前封/书脊/页块/后封) + 渐变或图封面 + 封面标题副标 + 角标缎带 + hover 翻正(纯 transform·GPU 合成·reduced-motion 降级) · 作品集书架/封面墙
用法
基础用法
传 title / subtitle 即用品牌渐变封面；静止露厚度，悬停翻正。
瑚琏hulianui
tsx
<Book3D title="瑚琏" subtitle="hulianui" />自定义封面渐变
coverColor 给封面渐变起止色。
CSS转换
tsx
<Book3D
title="CSS"
subtitle="转换"
coverColor={{ from: "#f7b733", to: "#e0992b" }}
/>角标缎带
ribbon + ribbonTone 在封面右上角贴缎带（danger / brand / success）。
HTML5
tsx
<Book3D
title="HTML"
subtitle="5"
ribbon="N°1"
ribbonTone="danger"
coverColor={{ from: "#e0654a", to: "#c14a32" }}
/>书架排布
并列多本，悬停各自翻正。
CSS转换JSFUNCTIONTSTYPES
tsx
<div className="flex flex-wrap gap-8">
<Book3D title="CSS" subtitle="转换" ribbon="NEW" coverColor={{ from: "#f7b733", to: "#e0992b" }} />
<Book3D title="JS" subtitle="FUNCTION" coverColor={{ from: "#5aa6e0", to: "#3f7fc0" }} />
<Book3D title="TS" subtitle="TYPES" ribbonTone="brand" />
</div>何时用
作品集/书架/封面墙这类需要立体书视觉的展示场景用，hover 时书体翻正、可选翻开内页。它是纯装饰展示卡，和本组下的数据型组件（Table/PricingTable）无关；要规整网格卡片用 List。
导入
ts
import { Book3D } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| cover | string | — | 封面图 url；提供时覆盖 coverColor 渐变 |
| logo | string | — | 封面中心叠加的产品 logo / app icon（图 url），标题落底部 |
| coverColor | { from: string; to: string } | 品牌渐变 | 封面渐变色 |
| spineColor | string | 浅纸色 | 书脊/页厚颜色（CSS color） |
| thickness | string | "2.25rem" | 书脊厚度（CSS 长度） |
| ribbon | string | — | 角标缎带文字（如 "NEW" / "N°1"） |
| ribbonTone | "brand" | "danger" | "success" | "danger" | 缎带语气 |
| href | string | — | 提供则整本书是链接 |
| target | string | — | 外链是否新窗（href 时生效） |
| className | string | — | 根节点类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | () => void | 无 href 时提供则整本书是按钮 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| title* | ReactNode | 封面主标题（如 "CSS" / "JS"） |
| subtitle | ReactNode | 封面副标题（如 "转换" / "FUNCTION"） |
| inside | ReactNode | 内页内容；提供则 hover 时前封绕书脊翻开露出内页 |
禁忌 / 坑
cover（图封面）会覆盖coverColor（渐变），二者同传以图为准。- hover 翻正/翻开是纯 CSS transform 动画，
prefers-reduced-motion下自动降级——不要再额外包 JS 动画。 href和onClick二选一：有 href 整本是<a>，否则有 onClick 是<button>。
相关
Table · ProTable · PricingTable · JsonViewer · EditableTable · List
Playground
CSS转换
<Book3D title="CSS" subtitle="转换" ribbon="NEW" ribbonTone="danger" coverColor={{ from: "#f7b733", to: "#e0992b" }} />