卡片翻转

正面只放最少的东西,细节藏在背面——列表保持克制,信息一个没少。 比"hover 展开"高级的地方在于它有物理意义:纸有两面,不需要学习。

鼠标悬停翻转;也可以用 Tab 聚焦后按空格/回车(触屏只能点击)。

触屏没有 hover,所以必须提供点击翻转——否则背面内容在手机上永远看不到, 那是内容丢失,不是效果降级。
两个面都在 DOM 里,读屏会把背面一起念、Tab 会跳进看不见的那面。 这里用 inert 把当前不可见的面关掉,翻转后再换过来。
perspective 必须写在祖先上;写在翻转元素自己身上,每个面各自算透视, 翻起来是平的、没有近大远小。
配色排版是占位。进项目要跟项目的设计体系走(库规范铁律 6)。