当前位置：首页 > 文章列表 > 文章 > 前端 > CSS卡片翻转动画实现教程

CSS卡片翻转动画实现教程

2025-12-02 15:19:33 0浏览收藏

1. 基本结构与样式

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


  正面内容
  背面内容

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

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 创建3D透视感 */
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; / 关键：隐藏背面 /
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;
}
.front {
background: #fff;
z-index: 2;
}
.back {
background: #007bff;
color: white;
transform: rotateY(180deg); / 背面初始旋转180度 /
}

2. 添加翻转交互

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

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

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

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

对应 HTML 结构稍作调整：


  
    正面
    背面

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学习网公众号！

Python函数模块化技巧与实践解析

上一篇: Python函数模块化技巧与实践解析

下一篇: CSS过渡与动画区别详解

查看更多