答案：通过css 3D变换和过渡实现卡片翻转。1. 构建包含前后两面的卡片结构，设置perspective和backface-visibility；2. 使用transform: rotateY()控制旋转，transition添加动画；3. 通过:hover或JavaScript切换类实现交互翻转，preserve-3d保持3D空间效果。
要实现卡片翻转动画，核心是利用 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); } </font></font></p><p>或者统一控制父级更简洁：</p><font face="Courier New"><pre class="brush:php;toolbar:false;"> .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 变换和背面控制，就能灵活实现各种翻转动画效果。
暂无评论