翻转卡片需三层嵌套结构、两个强制样式（backface-visibility: hidden 和 transform-style: preserve-3d）及一个触发逻辑（JS切类名），缺一不可，否则会出现背面消失、卡在90°、镜像或纯2D翻转等问题。

翻转卡片不是“加个 rotateY 就能动”，核心是三层嵌套结构 + 两个强制样式 + 一个触发逻辑，漏掉任意一项都会出现背面消失、卡在 90°、文字镜像或纯 2D 翻转。

HTML 必须用三层嵌套结构

不能只写一个

，也不能把正面和背面写成同级兄弟元素。必须有明确的外层容器、翻转主体、正反两面：

• ：设 perspective，值推荐 1000px（800–1200px 之间可调）
• ：这是真正旋转的容器，必须加 transform-style: preserve-3d
• 和

  ：同级、position: absolute、top: 0; left: 0; width: 100%; height: 100%

  常见错误：用单个 或只靠 opacity 切换——那不是翻转，是淡入淡出。

  CSS 里这三行不能少

  缺任意一条，翻转就会出问题：闪烁、错位、背面不显示、或者像纸片一样左右平移：

  • .card { transform-style: preserve-3d; transition: transform 0.6s ease; }：动画只作用于 transform，别写 all 0.6s
  • .front, .back { backface-visibility: hidden; }：必须分别加在两面上；iOS 微信 WebView 有时掉支持，可补 -webkit-backface-visibility: hidden
  • .back { transform: rotateY(180deg); }：背面初始就要朝后，否则 hover 一触发会先“弹”一下再翻

  注意：backface-visibility: hidden 加在 .card 上无效，它只对直系子元素生效。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  移动端点击翻转必须用 JS 切类名

  :hover 在手机上基本不可用，:active 更不行（松手就回弹）。可靠做法是绑定 click 并切换 is-flipped 类：

  • HTML 中给 .card 加 tabindex="0"，让它能被键盘聚焦，兼顾可访问性
  • CSS 写 .card.is-flipped { transform: rotateY(180deg); }，不要用 !important 覆盖 :hover
  • JS 用 element.classList.toggle('is-flipped')，比 setAttribute 更轻量；连点多次易错乱，可在 transitionstart 临时加 pointer-events: none

  别用 display: none 或 visibility: hidden 控制正反面——3D 空间里它们会破坏渲染层，导致卡顿或半截消失。

  图片模糊或边缘锯齿？先查这两处

  不是图本身质量差，而是渲染层没提上去：

  • 给 .card 加 will-change: transform（仅在必要时加，别全局滥用）
  • 如果背面是背景图，确保 background-size: cover + background-position: center，否则高 DPI 屏上拉伸失真

  别用 z-index 控制正反面顺序——3D 空间里它无效，靠的是 translateZ() 值和 rotateY() 组合。Safari 对 preserve-3d 支持更敏感，所有 transform 属性建议同时写标准版和 -webkit- 前缀。