css初级项目实战中制作卡片翻转效果-css教程-PHP中文网

css初级项目实战中制作卡片翻转效果

P粉602998670

发布： 2025-09-18 19:44:01

原创

380人浏览过

卡片翻转效果通过CSS 3D变换实现，核心是perspective创建透视、transform-style保留3D空间、backface-visibility隐藏背面；结构上用.card包裹.card-inner及前后两面，.card-inner在:hover时rotateY(180deg)触发翻转，配合transition实现动画，可通过rotateX或transform-origin扩展上下翻转或调整轴心。

css初级项目实战中制作卡片翻转效果

卡片翻转效果是CSS中非常实用且视觉吸引力强的交互设计，常用于产品展示、图片墙、信息提示等场景。实现这个效果的关键在于使用3D变换和

transform-style

登录后复制

属性，让元素在翻转时具有立体感。

1. 理解翻转结构

要实现翻转效果，需要一个“卡片容器”包裹前后两个面。结构通常如下：

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

登录后复制

说明：外层

.card

登录后复制

控制整体布局，内层

.card-inner

登录后复制

负责翻转动画，前后两面分别用

.card-front

登录后复制

和

.card-back

登录后复制

表示。

2. 设置基础样式与3D空间

为了让翻转有立体感，必须启用3D渲染上下文。

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

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 创建3D透视距离 */
}
<p>.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d; /<em> 保持子元素3D空间 </em>/
transition: transform 0.6s ease; /<em> 添加翻转过渡 </em>/
}</p><p>.card-front, .card-back {
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.1);
}</p><p>.card-front {
background: #fff;
color: #333;
}</p><p>.card-back {
background: #007bff;
color: white;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

登录后复制

关键点：

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

```
perspective
```
登录后复制
加在父容器上，决定观察3D效果的距离
```
transform-style: preserve-3d
```
登录后复制
确保内部元素保持3D变换
```
backface-visibility: hidden
```
登录后复制
防止背面元素在正面显示

3. 添加悬停翻转交互

通过:hover触发翻转动作：

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

登录后复制

当鼠标悬停在卡片上时，

.card-inner

登录后复制

沿Y轴旋转180度，正面转到背后，背面转到前面，形成翻转效果。

4. 可选优化：垂直翻转或其他动效

如果想实现上下翻转，改用

rotateX

登录后复制

：

.card:hover .card-inner {
  transform: rotateX(180deg);
}
.card-back {
  transform: rotateX(180deg);
}

登录后复制

也可以结合

transform-origin

登录后复制

调整翻转轴心位置，比如从左侧开始翻转：

.card-inner {
  transform-origin: center left;
}

登录后复制

基本上就这些。掌握perspective、transform-style和backface-visibility这三个核心概念，就能灵活实现各种卡片翻转效果。不复杂但容易忽略细节，建议动手写一遍加深理解。

以上就是css初级项目实战中制作卡片翻转效果的详细内容，更多请关注php中文网其它相关文章！