如何在CSS中制作卡片旋转动画_transform rotate @keyframes实现效果

答案是使用CSS的transform、rotate和transition或@keyframes实现卡片翻转动画。1. HTML结构包含正背面两个div；2. 父容器设置perspective创建3D空间，卡片设置transform-style: preserve-3d；3. 正背面绝对定位，背面初始rotateY(180deg)并隐藏反面；4. 通过:hover触发card的rotateY(180deg)配合transition实现平滑翻转，或用@keyframes定义动画帧，结合J*aScript触发动画类，确保视觉连贯性与交互流畅。

如何在css中制作卡片旋转动画_transform rotate @keyframes实现效果

想让网页中的卡片元素实现翻转动画，比如像翻牌一样展示背面内容，可以通过CSS的 transform、rotate 和 @keyframes 配合完成。整个过程不难，关键是设置好3D变换环境和旋转关键帧。

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

先写一个简单的卡片结构，包含正面和背面两个面：

<div class="card">
  <div class="card-face front">正面</div>
  <div class="card-face back">背面</div>
</div>

2. 设置3D空间与翻转容器

CSS中要启用3D变换，必须在父容器上使用 perspective，并给卡片设置 transform-style: preserve-3d：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 隐藏背面时不可见 </em>/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}</p><p>.front {
background: #3498db;
color: white;
}</p><p>.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

3. 使用 @keyframes 定义旋转动画

通过 @keyframes 定义一个从0到180度的Y轴旋转动画：

@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
<p>.card:hover .front {
animation: cardFlip 0.6s forwards;
}</p><p>.card:hover .back {
animation: cardFlip 0.6s forwards;
animation-delay: 0.6s; /<em> 等正面翻完再显示背面 </em>/
}</p>

上面代码会让卡片在悬停时正面翻转，背面延迟出现。但更推荐的方式是直接对整个卡片做变换，而不是分别动画两个面。

LongShot

LongShot 是一款 AI 写作助手，可帮助您生成针对搜索引擎优化的内容博客。

77 查看详情 LongShot

改进方案：把动画应用在包裹层：

.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}
<p>.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}</p><p>.card:hover {
transform: rotateY(180deg);
}</p><p>.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}</p><p>.front {
background: #3498db;
color: white;
}</p><p>.back {
background: #e74c3c;
color: white;
transform: rotateY(180deg);
}</p>

这种方式更简洁，无需 @keyframes，用 transition 实现平滑翻转。但如果坚持要用 @keyframes，可以这样定义：

@keyframes flipIn {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
<p>.card.animated {
animation: flipIn 0.6s ease forwards;
}</p>

然后通过J*aScript添加类触发动画：

document.querySelector('.card').addEventListener('click', function() {
  this.classList.toggle('animated');
});

4. 关键点总结

perspective 决定3D视觉距离，一般设在父容器
transform-style: preserve-3d 确保子元素保持3D空间
backface-visibility: hidden 避免翻转时看到反面内容
背面元素初始应 rotateY(180deg)
动画可用 transition（交互）或 @keyframes（精确控制）

基本上就这些。实现卡片翻转的核心是理解3D变换机制，选对方法就能轻松做出流畅效果。

以上就是如何在CSS中制作卡片旋转动画_transform rotate @keyframes实现效果的详细内容，更多请关注其它相关文章！

# 中文网 # 产品营销推广方案逻辑 # 广宁seo优化技巧 # 红薯批发营销推广方案 # 映日荷seo # 电商推广营销模式 # 百度关键词搜索排名统计 # 井冈山手机网站优化排名 # 教育网站推广公司代运营 # 高端网站建设大约多少钱 # 淮安视频营销推广招聘网 # 解决问题 # 会让 # 要用 # css # 可以通过 # 相关文章 # 就能 # 有什么特点 # 流式 # 如何在 # 绝对定位 # ai # ssl # html # java # javascript # 卡片旋转

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-29

4008744355

如何在CSS中制作卡片旋转动画_transform rotate @keyframes实现效果

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

2. 设置3D空间与翻转容器

3. 使用 @keyframes 定义旋转动画

4. 关键点总结

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice