在css中如何用animation制作卡片翻转3D效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

在css中如何用animation制作卡片翻转3D效果

2025-10-10

浏览次数：次

返回列表

核心是利用perspective、transform-style和backface-visibility配合@keyframes实现3D翻转。首先构建包含前后两面的卡片结构，设置外层容器的perspective营造3D视觉，添加transform-style: preserve-3d确保子元素处于3D空间，通过backface-visibility: hidden隐藏元素背面。正面初始不旋转，背面使用transform: rotateY(180deg)预设翻转状态。利用@keyframes定义从rotateY(0deg)到180deg的动画关键帧，再将动画绑定至.card:hover或设置为无限循环实现自动翻转，最终达成平滑的3D卡片翻转效果。

在css中如何用animation制作卡片翻转3d效果

要使用CSS animation 制作卡片翻转3D效果，核心是结合 transform、perspective 和 @keyframes 实现立体旋转动画。下面一步步说明如何实现一个鼠标悬停时翻转180度的3D卡片效果。

1. 基本HTML结构

卡片通常由一个外层容器和前后两个面组成：

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

2. 设置3D空间与容器样式

外层容器需要设置透视（perspective）来产生3D视觉效果，并启用3D变换：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 重要：添加3D透视感 */
  margin: 50px auto;
}
<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;
color: white;
}</p><p>.front {
background-color: #3498db;
z-index: 2;
}</p><p>.back {
background-color: #e74c3c;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

3. 定义翻转动画

使用 @keyframes 定义从0到180度的Y轴旋转：

@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

然后应用动画到卡片整体或前后面。但更推荐用 transition 实现交互式翻转，若坚持用 animation 触发，可这样写：

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

.card:hover .front {
  animation: flip 0.6s forwards;
}
<p>.card:hover .back {
animation: flip-reverse 0.6s forwards;
}</p><p>@keyframes flip-reverse {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(360deg);
}
}</p>

不过更常见且流畅的做法是用 transition 配合状态变化。如果一定要用 animation 实现自动翻转，可以这样：

.card {
  animation: auto-flip 3s infinite alternate;
}
<p>@keyframes auto-flip {
to {
transform: rotateY(180deg);
}
}</p>

记得给 .card 添加 transform-style: preserve-3d; 以保持子元素在3D空间中：

.card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

4. 完整示例（自动翻转）

整合所有代码实现自动3D翻转：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
  margin: 50px auto;
  transform-style: preserve-3d;
  animation: auto-flip 3s infinite alternate;
}
<p>@keyframes auto-flip {
to {
transform: rotateY(180deg);
}
}</p><p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}</p><p>.front { background: #3498db; }
.back {
background: #e74c3c;
transform: rotateY(180deg);
}</p>

基本上就这些。关键是 perspective、transform-style: preserve-3d 和 backface-visibility: hidden 这三个属性配合动画或过渡，才能呈现出干净的3D翻转效果。

以上就是在css中如何用animation制作卡片翻转3D效果的详细内容，更多请关注其它相关文章！

# 呈现出 # 安阳营销推广教程 # 赣州哪个网站推广产品好 # 烟台优质网站建设有哪些 # SEO优化海兔网络 # 信阳搜索关键词排名专业 # 南京网站推广手段 # 关键词排名怎么看出来 # 陕西矩阵seo渠道价 # 浙江seo靠谱公司 # 番禺网站优化推广报价 # css # 解决问题 # 要用 # 中文网 # 相关文章 # 鼠标 # 选择器 # 两种类型 # 中不 # 如何用 # html