答案：通过CSS的transform和transition属性结合:hover或@keyframes实现卡片旋转动画。1. 悬停翻转利用perspective、transform-style: preserve-3d和backface-visibility实现3D翻牌效果；2. 自动旋转使用@keyframes定义rotate动画，配合animation属性让卡片持续绕轴转动，适用于加载提示或展示场景。

通过CSS实现卡片旋转动画，关键在于使用transform和transition属性，配合:hover伪类或@keyframes动画。下面介绍两种常见方式：悬停翻转和自动旋转。

1. 悬停翻转效果（类似翻牌）

创建一个正面和背面不同的卡片，鼠标悬停时沿Y轴翻转180度。

HTML结构：

CSS样式：

2. 自动持续旋转动画

让卡片持续绕Z轴或Y轴旋转，适合加载动画或展示用途。

将rotate改为rotateX或rotateY可实现不同轴向的旋转。

关键点说明

perspective：定义3D变换的视觉距离，值越小透视感越强。
transform-style: preserve-3d：确保子元素在3D空间中渲染。
backface-visibility: hidden：避免翻转时看到元素背面内容。
transition：控制翻转动画的缓动和持续时间。
@keyframes：定义复杂旋转路径，比如从0到360度循环。

基本上就这些，不复杂但容易忽略细节。