要实现details标签的书卡翻转动画，需用css模拟正反面：两层绝对定位重叠，配合transform: rotatey()、backface-visibility:hidden及[open]/:not([open])状态切换，并禁用summary默认箭头。
details标签默认行为不支持翻转动画，必须用CSS重置
浏览器对 <details></details> 的默认样式是纯展开/收起，没有过渡效果，更不会翻转。想实现书卡翻转，得把 <details></details> 当作语义容器用，靠 <summary></summary> 和内部内容层模拟正反面，再用 CSS 的 transform: rotateY() + transition 控制翻转。关键点是：不能直接给 <details></details> 加 transform，要包裹两层（正面/背面），并用 :not([open]) 和 [open] 切换状态。
结构必须用绝对定位叠放两层，否则翻转会错位
常见错误是把正面和背面写成兄弟元素并列排布，结果翻转时它们各自绕自身中心转，视觉上像两张卡片在打架。正确做法是让它们都 position: absolute、top: 0; left: 0; width: 100%; height: 100%，完全重叠。再通过 backface-visibility: hidden 防止背面内容在正面旋转时“透出”。示例结构：
<details class="book-card"><summary></summary><div class="card-front">书名/封面</div> <div class="card-back">简介/评分</div> </details>
然后用 CSS 控制：.card-front 在未展开时显示、展开时绕 Y 轴转 180°；.card-back 则相反。注意：两层都要设 transform-style: preserve-3d 父容器（即 .book-card）上。
toggle状态切换要用[open]伪类，别用JavaScript监听
<details></details> 的开闭状态原生由用户点击 <summary></summary> 触发，CSS 可直接响应，无需 JS。错误做法是加 onclick 或监听 toggle 事件再去改 class —— 这不仅多余，还会破坏可访问性（如屏幕阅读器无法感知状态）。正确方式是：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
.book-card:not([open]) .card-front→transform: rotateY(0deg) -
.book-card:not([open]) .card-back→transform: rotateY(180deg) -
.book-card[open] .card-front→transform: rotateY(-180deg) -
.book-card[open] .card-back→transform: rotateY(0deg)
所有 transform 都加 transition: transform 0.4s ease-in-out，且确保父容器有明确宽高（百分比无效，必须是 px/em/rem）。
移动端点击区域小、翻转卡顿，得加 touch-action 和 will-change
在 iOS Safari 或部分安卓浏览器里，<summary></summary> 默认点击热区窄，容易误触；加上 3D transform 后若没优化，翻转可能掉帧。解决方法：
- 给
<summary></summary>加touch-action: manipulation，提升点击响应速度 - 给两层卡片加
will-change: transform，提示浏览器提前升格图层（但别滥用，仅加在需要动画的元素上） - 避免在
.card-front/.card-back里放大量图片或复杂布局，否则翻转时重排重绘明显
另外，<summary></summary> 默认有 list-style 小箭头，记得用 list-style: none 清掉，否则翻转时它会跟着转，干扰视觉。
border-radius 和 box-shadow 在旋转过程中可能渲染异常 —— 此时要把这些样式移到外层容器（如 .book-card），而不是直接写在翻转层上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
