用 rotateY 配合 @keyframes 实现卡片 3D 翻转，需设外层 perspective、翻转容器 transform-style: preserve-3d，正反面均 backface-visibility: hidden，正面 rotateY(0)，背面 rotateY(180deg)，动画控制 Y 轴旋转，hover 或 JS 切换触发，注意移动端适配与闪动优化。
用 rotateY 配合 CSS 动画（@keyframes）实现卡片 3D 翻转，核心是控制容器的 transform-style: preserve-3d 和子元素的 backface-visibility: hidden，再用 rotateY(180deg) 切换正反面。
结构准备：正反两面容器
卡片需包裹两个子元素（正面和背面），都设为绝对定位、尺寸一致，叠在一起：
- 外层容器设
position: relative和perspective: 1000px（决定 3D 深度感） - 翻转容器（如
.card-inner）设transform-style: preserve-3d - 正面（
.front）默认rotateY(0)，背面（.back）初始rotateY(180deg) - 两面都加
backface-visibility: hidden，避免翻转时看到背面内容反向显示
动画定义：用 keyframes 控制旋转过程
定义一个从 0° 到 180° 的 Y 轴旋转动画：
@keyframes flip {
from { transform: rotateY(0deg); }
to { transform: rotateY(180deg); }
}
把动画应用到 .card-inner 上，设置 duration、timing-function（如 cubic-bezier(0.4, 2.3, 0.2, 1) 可让翻转更自然），并注意 transform-origin: center 保证绕中心转。
立即学习“前端免费学习笔记（深入）”；
交互触发：hover 或 JS 切换类名
最常用的是 hover 翻转：
- 给外层容器（如
.card）加:hover .card-inner { animation: flip 0.6s ease-in-out forwards; } - 若需点击切换或保持状态，用 JS 切换一个类（如
.is-flipped），CSS 中写：.card.is-flipped .card-inner { transform: rotateY(180deg); } - 记得补上
transition: transform 0.6s ease-in-out替代动画，更轻量且支持反向过渡
细节优化：防止闪动与适配移动端
常见问题和应对：
- Chrome 下偶尔闪动？加
-webkit-backface-visibility: hidden兼容 - 翻转后背面文字反了？确保
.back内部再加一层rotateY(180deg)或直接写transform: rotateY(180deg)校正 - 移动端 hover 不生效？改用
touchstart+ JS 切类，或用@media (hover: hover)区分设备 - 想加阴影或景深感？在
.card上加box-shadow，配合perspective值调整立体感强弱
基本上就这些。不复杂但容易忽略 backface-visibility 和 transform-style，补上就能稳稳翻起来。
