如何在CSS中使用过渡制作卡片旋转动画_transform rotate transition实现-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-29 12:16:03

原创

380人浏览过

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

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

想让卡片在鼠标悬停时平滑旋转，可以用 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 轴旋转一定角度：

Magic Write

Canva旗下AI文案生成器

查看详情

.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 和过渡时间的协调。试试调不同的角度和缓动函数，找到最适合你设计的效果。

以上就是如何在CSS中使用过渡制作卡片旋转动画_transform rotate transition实现的详细内容，更多请关注php中文网其它相关文章！