答案：通过CSS的transform和animation属性，结合perspective、transform-style: preserve-3d与backface-visibility，可实现流畅的3D卡片翻转效果，常用于展示双面内容。
卡片翻转效果在网页设计中常用于展示前后两面内容，比如产品信息、答题卡或图片展示。通过CSS的transform和animation属性，可以轻松实现平滑的3D翻转动画。关键在于使用rotateY配合transform-style: preserve-3d来构建立体视觉。
基本结构与样式设置
要实现翻转效果，先搭建HTML结构。通常用一个外层容器包裹前后两个面：
正面内容背面内容
为容器设置3D空间，确保子元素在翻转时不发生形变：
- 设置父容器 perspective：控制3D视距，让翻转更有景深感。
- transform-style: preserve-3d：保证子元素也处于3D空间中。
- positioning布局：前后两面绝对定位重叠。
定义翻转动效
使用@keyframes创建旋转动画，从0度到180度绕Y轴旋转：
立即学习“前端免费学习笔记（深入）”；
@keyframes flip {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(180deg); }
}
将动画绑定到卡片容器，并设置持续时间和缓动函数：
- 指定
animation-name、duration和timing-function。 - 可选择是否
infinite循环播放，或通过:hover触发。
控制前后层显示顺序
翻转过程中需避免背面内容在正面时可见。利用backface-visibility隐藏被翻转过去的面：
- 给前后两个面都设置
backface-visibility: hidden。 - 正面在rotateY(180deg)时自动隐藏，背面随之显现。
这样能实现干净的切换，不会出现双面重叠或闪烁问题。
触发方式与交互优化
动画可通过多种方式触发，提升用户体验：
- 使用
:hover让鼠标悬停时翻转。 - 通过JavaScript添加/移除类名实现点击控制。
- 设置
animation-direction: alternate实现来回翻转。
建议加入过渡还原逻辑，比如反向动画回正，形成完整交互闭环。
基本上就这些。掌握perspective、preserve-3d和backface-visibility这三个核心点，再结合rotateY动画，就能做出流畅自然的卡片翻转效果。不复杂但容易忽略细节，尤其是3D上下文的构建。
