css transition在卡片翻转效果中的应用

34次阅读

CSS transition 实现卡片翻转的核心是结合 transform 与 transition 属性，通过设置 perspective、backface-visibility 和 transform-style 构建 3D 翻转效果，利用 transition 控制旋转过渡的时长与节奏，使正面与背面在 hover 时平滑切换，配合 transform-origin 与 easing 曲线优化视觉体验，最终实现无需 JavaScript 的自然动画。

CSS transition 在卡片翻转效果中起到关键作用，它让元素的变换过程变得平滑自然。要实现一个视觉上吸引人的翻转动画，核心是结合 transform 与 transition 属性，控制卡片前后两面在旋转时的过渡表现。

1. 基本结构与样式设置

卡片翻转通常由一个外层容器和两个子面（正面和背面）组成。使用 CSS 的 3D 变换前，需先构建正确的 HTML 结构：

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

关键的 CSS 设置包括：

.card：设置为相对定位，并启用 3D 空间（
```
perspective
```
）
.card-face：绝对定位，铺满容器，通过
```
backface-visibility: hidden
```
隐藏背面不可见时的内容
使用
```
transform-style: preserve-3d
```
确保子元素保持在 3D 空间中

2. 应用 transition 实现平滑翻转

transition 控制的是 transform 属性的变化过程。当鼠标悬停或状态改变时，卡片绕 Y 轴旋转 180 度：

立即学习“前端免费学习笔记（深入）”；

BGremover

Vanceai推出的图片背景移除工具

50

查看详情

 .card {   position: relative;   width: 200px;   height: 300px;   perspective: 1000px; }  .card-face {   position: absolute;   width: 100%;   height: 100%;   backface-visibility: hidden;   transition: transform 0.6s ease-in-out; }  .front {   transform: rotateY(0deg); }  .back {   transform: rotateY(180deg); }  .card:hover .front {   transform: rotateY(-180deg); }  .card:hover .back {   transform: rotateY(0deg); }

这里 transition 定义了 transform 属性在 0.6 秒内以缓动方式变化，使翻转动作更自然。