CSS初级项目如何制作卡片翻转_animation和transform rotateY实现-css教程-PHP中文网

CSS初级项目如何制作卡片翻转_animation和transform rotateY实现

P粉602998670

发布： 2025-11-27 12:50:02

原创

915人浏览过

卡片翻转效果通过CSS的transform和animation实现，1. 使用rotateY配合transform-style: preserve-3d创建3D环境；2. HTML结构包含外层容器与正背面元素；3. 设置perspective增强立体感，backface-visibility隐藏背面；4. hover时触发rotateY旋转180度并添加transition实现平滑动画，最终完成流畅翻转效果。

css初级项目如何制作卡片翻转_animation和transform rotatey实现

卡片翻转效果是CSS中常见的交互设计，利用 transform 和 animation 可以轻松实现。核心在于使用 rotateY 配合 transform-style: preserve-3d 来创建3D翻转动画。下面是一个简单实用的实现方法。

1. HTML结构：创建翻转卡片容器

卡片通常由一个外层容器和两个面（正面、背面）组成：

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

登录后复制

2. CSS基础样式与3D环境设置

为卡片设置基本尺寸，并启用3D变换空间：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
<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: #3498db;
transform: rotateY(0deg); /<em> 初始状态不旋转 </em>/
}</p><p>.back {
background: #e74c3c;
transform: rotateY(180deg); /<em> 背面初始为翻转状态 </em>/
}</p>

登录后复制

3. 添加翻转动画：hover触发rotateY变化

通过:hover状态让卡片翻转180度，正面隐藏，背面显示：

腾讯混元文生视频

腾讯发布的AI视频生成大模型技术

266

查看详情

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

.card:hover .front {
  transform: rotateY(-180deg);
}
<p>.card:hover .back {
transform: rotateY(0deg);
}</p><p>.card-face {
transition: transform 0.6s ease-in-out; /<em> 平滑过渡动画 </em>/
}</p>

登录后复制

注意：必须给 .card-face 添加 transition，才能看到动画效果。