纯CSS翻转动画需父容器设perspective、翻转容器设transform-style: preserve-3d，前后两面绝对定位叠加，后表面初始化rotateY(180deg)，用transition控制rotateY(0deg→180deg)实现立体翻转。
用 transform: rotateY() 实现 HTML5 元素翻转
纯 CSS 实现翻转动画不需要 JavaScript，核心是 transform: rotateY(180deg) 配合 transform-style: preserve-3d。常见错误是父容器没设 perspective，导致翻转看起来像平面缩放而非立体翻转。
关键点：
-
perspective必须加在翻转容器的父级（比如<div class="card-container">），不能只加在翻转元素自身 -
transform-style: preserve-3d要设在直接包裹前后两面的容器上（如<div class="card">） - 前后两面需用
position: absolute叠在一起，且后表面要加transform: rotateY(180deg)初始化 - 翻转动画建议用
transform: rotateY(0deg)→rotateY(180deg)控制，避免用backface-visibility: hidden误删内容
<style>
.card-container {
perspective: 1000px;
}
.card {
width: 200px;
height: 260px;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.front { background: #4a90e2; }
.back { background: #e74c3c; transform: rotateY(180deg); }
</style>
<div class="card-container">
<div class="card">
<div class="card-face front">正面</div>
<div class="card-face back">背面</div>
</div>
</div>
JavaScript 控制翻转状态时注意事件触发时机
用 JS 切换 is-flipped 类名是最常用方式，但容易忽略动画未结束就重复点击导致状态错乱。比如快速连点两次，card 可能卡在 90° 中间态或翻回原样。
稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 翻转开始前加
pointer-events: none禁用交互，动画结束后再恢复 - 监听
transitionend事件，而不是靠setTimeout估算时间 - 检查当前是否正在动画中，用
getComputedStyle(el).transform不可靠，优先用类名或 data 属性标记状态
<script>
const card = document.querySelector('.card');
let isFlipping = false;
function flipCard() {
if (isFlipping) return;
isFlipping = true;
card.classList.toggle('is-flipped');
card.style.pointerEvents = 'none';
const handleEnd = () => {
isFlipping = false;
card.style.pointerEvents = '';
card.removeEventListener('transitionend', handleEnd);
};
card.addEventListener('transitionend', handleEnd);
}
card.addEventListener('click', flipCard);
</script>
移动端 Safari 的 rotateY 兼容性陷阱
iOS 15.4 之前，Safari 对 transform: rotateY() 的硬件加速支持不稳定，尤其在 position: fixed 或 overflow: scroll 区域内翻转，可能出现闪烁、卡顿甚至白屏。
绕过方案：
- 强制开启 GPU 加速：给翻转容器加
transform: translateZ(0)或will-change: transform - 避免在
body滚动区域直接翻转；把翻转容器包进position: relative的局部容器里 - 不用
rotateY，改用rotate3d(0, 1, 0, 180deg)—— Safari 对这个写法兼容更稳 - 真机测试必须覆盖 iOS 14–16，模拟器不可信
翻转动画性能差？先查这三处
翻转卡顿通常不是因为动画本身复杂，而是布局或渲染链路被意外打断：
- 翻转元素内部有大量重排（比如动态插入 DOM、频繁读取
offsetHeight） - 用了
box-shadow或filter: blur()等高开销属性，且没加transform: translateZ(0)升级为合成层 - 父级设置了
overflow: hidden，而翻转角度导致边缘裁剪触发额外光栅化
Chrome DevTools 的 “Rendering” 面板打开“FPS Meter”和“Layer Borders”，能一眼看出哪些元素没走合成层。
