答案：通过CSS的transform与transition属性，设置.card的transform-origin为中心，并在.card:hover时应用rotate(15deg)实现平滑旋转，配合过渡时间与缓动函数使效果更自然。
想让卡片在鼠标悬停时平滑旋转，可以用 transform 配合 transition 实现。关键在于设置初始状态、触发条件和过渡效果，让 rotate 变化更自然。
1. 基础结构：HTML 卡片容器
先写一个简单的卡片元素，比如用 div 包裹内容：
<div class="card"> <img src="image.jpg" alt="示例图片"> <h3>卡片标题</h3> <p>这里是卡片描述文字</p> </div>
2. 设置基础样式与变换原点
为卡片添加基本样式，并定义 transform-origin 控制旋转中心点：
.card {
width: 200px;
height: 300px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
text-align: center;
background: white;
/* 设置变换原点为卡片中心 */
transform-origin: center center;
/* 添加过渡动画 */
transition: transform 0.6s ease;
}
注意： transform-origin 默认是中心（center），也可设为 top left 或 50% 50% 等值。
立即学习“前端免费学习笔记（深入）”；
3. 悬停时使用 rotate 实现旋转
当鼠标移到卡片上时，让它绕 Z 轴旋转一定角度：
.card:hover {
transform: rotate(15deg);
}
rotate(15deg) 表示顺时针旋转 15 度。你也可以尝试 rotate(-15deg) 逆时针转。
4. 进阶：3D 旋转效果（可选）
如果想做更炫的 3D 翻转，可以结合 perspective 和 rotateX/rotateY：
.card-container {
perspective: 1000px;
}
.card {
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.7, 0.3);
}
.card:hover {
transform: rotateY(180deg);
}
这样适合做翻面卡片（正面/背面切换），需要额外设置 backface-visibility 和前后两个面。
基本上就这些。核心就是 transition 监听 transform 的变化，加上 :hover 触发 rotate。不复杂但容易忽略 transform-origin 和过渡时间的协调。试试调不同的角度和缓动函数，找到最适合你设计的效果。
