如何在CSS中使用过渡制作卡片旋转动画_transform rotate transition实现

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用过渡制作卡片旋转动画_transform rotate transition实现

2025-11-29

浏览次数：次

返回列表

答案：通过CSS的transform与transition属性，设置.card的transform-origin为中心，并在.card:hover时应用rotate(15deg)实现平滑旋转，配合过渡时间与缓动函数使效果更自然。

如何在css中使用过渡制作卡片旋转动画_transform rotate transition实现

想让卡片在鼠标悬停时平滑旋转，可以用 transform 配合 transition 实现。关键在于设置初始状态、触发条件和过渡效果，让 rotate 变化更自然。

1. 基础结构：HTML 卡片容器

先写一个简单的卡片元素，比如用 div 包裹内容：

<div class="card">
  @@##@@
  <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 轴旋转一定角度：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

.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);
}