翻转卡片需三层嵌套结构、两个强制样式（backface-visibility: hidden 和 transform-style: preserve-3d）及一个触发逻辑（JS切类名），缺一不可，否则会出现背面消失、卡在90°、镜像或纯2D翻转等问题。
翻转卡片不是“加个 rotateY 就能动”，核心是三层嵌套结构 + 两个强制样式 + 一个触发逻辑，漏掉任意一项都会出现背面消失、卡在 90°、文字镜像或纯 2D 翻转。
HTML 必须用三层嵌套结构
不能只写一个 <div class="card"></div>，也不能把正面和背面写成同级兄弟元素。必须有明确的外层容器、翻转主体、正反两面：
<div class="card-container">：设 <code>perspective，值推荐1000px（800–1200px 之间可调）<div class="card">：这是真正旋转的容器，必须加 <code>transform-style: preserve-3d<div class="front"> 和 <code><div class="back">：同级、<code>position: absolute、top: 0; left: 0; width: 100%; height: 100%常见错误：用单个
<img alt="怎么用HTML排版翻转卡片特效" >或只靠opacity切换——那不是翻转，是淡入淡出。CSS 里这三行不能少
缺任意一条，翻转就会出问题：闪烁、错位、背面不显示、或者像纸片一样左右平移：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
.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上无效，它只对直系子元素生效。移动端点击翻转必须用 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-前缀。-
