首页 > 文章 > 前端

CSS卡片翻转动画实现教程

时间：2025-12-02 15:19:33 492浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS实现卡片翻转动画教程》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

答案：通过CSS 3D变换和过渡实现卡片翻转。1. 构建包含前后两面的卡片结构，设置perspective和backface-visibility；2. 使用transform: rotateY()控制旋转，transition添加动画；3. 通过:hover或JavaScript切换类实现交互翻转，preserve-3d保持3D空间效果。

如何通过css实现卡片翻转动画

要实现卡片翻转动画，核心是利用 CSS 的 3D 变换（transform）和过渡（transition）效果。通过控制元素的旋转和背面可见性，就能做出逼真的翻转效果。

1. 基本结构与样式

先构建一个包含前后两面的卡片容器。通常使用一个父容器包裹 front 和 back 两个子元素。

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

给卡片设置基本样式，并启用 3D 空间：

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 关键：隐藏背面 </em>/
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: transform 0.6s ease;
}</p><p>.front {
background: #fff;
z-index: 2;
}</p><p>.back {
background: #007bff;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

2. 添加翻转交互

通过:hover 或类切换触发翻转。当鼠标悬停在卡片上时，让整个卡片容器旋转。

.card:hover .front {
  transform: rotateY(-180deg);
}
<p>.card:hover .back {
transform: rotateY(0deg);
}
</p>

或者统一控制父级更简洁：

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* 保持3D空间 */
}
<p>.card:hover .card-inner {
transform: rotateY(180deg);
}</p>

对应 HTML 结构稍作调整：

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

3. 关键属性说明

理解以下几个 CSS 属性对实现翻转至关重要：

perspective：定义观察者距离元素的远近，值越小透视感越强
transform-style: preserve-3d：确保子元素也处于3D空间中
backface-visibility: hidden：防止背面内容反向显示
rotateY()：沿Y轴旋转，实现水平翻转效果

4. 可扩展用法

可以结合 JavaScript 动态添加类来控制翻转状态，适用于点击翻转等场景：

// JS 示例
document.querySelector('.card').addEventListener('click', function() {
  this.classList.toggle('flipped');
});

CSS 中定义 flipped 状态：

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

基本上就这些。掌握好 3D 变换和背面控制，就能灵活实现各种翻转动画效果。

本篇关于《CSS卡片翻转动画实现教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！