单个元素加 transform: rotateY(180deg) 不能实现真翻转卡片，因缺少 perspective 和 transform-style: preserve-3d，无法启用3D渲染，导致镜像、穿模、无过渡等问题。
直接用单个元素加 transform: rotateY(180deg) 不是“翻转卡片”，只是镜像旋转——文字会反向、背面内容不可控、没有立体感。真翻转必须用嵌套结构+3D上下文。
为什么单行CSS rotateY(180deg) 不能当翻转卡片用
它只是把一个元素绕Y轴转半圈，没前后两面概念。常见错误现象包括：
- 鼠标悬停时文字左右颠倒（比如“确认”变成“认确”）
- 移开鼠标瞬间“啪”一下跳回，毫无过渡
- 在 Safari 或旧版 Chrome 中完全不动，控制台也无报错
根本原因是：缺少 perspective 和 transform-style: preserve-3d，浏览器压根没启用3D渲染管线，rotateY 就退化成 2D 位移。
transform-style: preserve-3d 必须加在哪一层
必须加在**直接包裹正面和背面的容器上**，比如 .card 或 .flipper，不是最外层包装盒，也不是 .front 本身。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 加错位置（如加在
.card-container上）→ 子元素仍被压平，翻转无效 - 移动端 Safari 需补前缀：
-webkit-transform-style: preserve-3d - 若父容器用了
display: flex或grid，且自身有transform（如scale(0.95)），会切断 3D 上下文，导致翻转卡顿或消失
背面内容初始化必须写 transform: rotateY(180deg)
否则初始状态背面就朝前，用户一打开页面就看到背面，或者翻转中途“透底”露出镜像文字。
-
.front和.back都要设backface-visibility: hidden，漏一个就会穿模 -
.back的rotateY(180deg)是静态声明，不是动画值；翻转动作由外层容器的transform: rotateY(180deg)触发 - Safari 15.4 之前对深层嵌套的
preserve-3d支持差，若结构是.wrapper > .card > .inner > .front/.back，建议砍掉.inner层，让.card直接包两面
hover 和 click 触发的结构不能混用
用 :hover 就别在 JS 里 toggle .is-flipped，否则行为冲突：鼠标悬停时翻过去，点一下又翻回来，体验断裂。
- 纯 hover 场景：给外层
.card设:hover .card-inner { transform: rotateY(180deg); } - 点击翻转场景：JS 只操作
element.classList.toggle('is-flipped')，CSS 用.card.is-flipped .card-inner { transform: rotateY(180deg); } - 兼顾移动端：用
@media (hover: none)关闭 hover，改用 click + class 切换，避免 iOS Safari 点一次触发、再点一次才恢复的问题
最容易被忽略的是 perspective 值和容器 display 类型的耦合——Flex 容器内 preserve-3d 在 Safari 上大概率失效，换成 display: inline-block 或 block 往往立刻修复。
