使用 rotateY、perspective 和 backface-visibility 实现流畅的 3D 卡片翻转效果
体验两种不同的触发方式：悬停翻转和点击翻转
💡 提示：将鼠标悬停在第一张卡片上，或点击第二、三张卡片查看翻转效果
悬停查看详情
我们提供 UI/UX 设计、品牌设计和视觉设计服务，帮助您的产品脱颖而出。
点击查看详情
👆 点击翻转从前端到后端，我们提供完整的 Web 应用开发解决方案，技术栈现代化。
👆 再次点击点击查看详情
👆 点击翻转使用 React Native 和 Flutter 开发高性能的跨平台移动应用。
👆 再次点击创建卡片的三层结构：容器、内部翻转层、正反面：
<!-- 卡片容器 -->
<div class="flip-card">
<!-- 内部翻转层 -->
<div class="flip-card-inner">
<!-- 正面 -->
<div class="flip-card-face flip-card-front">
<h3>卡片标题</h3>
<p>卡片描述</p>
</div>
<!-- 背面 -->
<div class="flip-card-face flip-card-back">
<h3>背面标题</h3>
<p>背面内容</p>
</div>
</div>
</div>在容器上设置 perspective，在内部层设置 transform-style：
/* 卡片容器 - 提供 3D 透视空间 */
.flip-card {
width: 300px;
height: 400px;
perspective: 1000px;
/* perspective 值越小，3D 效果越明显 */
}
/* 内部翻转层 - 保持 3D 空间 */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
/* preserve-3d 让子元素保持在 3D 空间中 */
}使用绝对定位叠加正反面，并隐藏背面：
/* 正反面共同样式 */
.flip-card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
/* 隐藏元素的背面，避免翻转时看到镜像 */
}
/* 正面 */
.flip-card-front {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* 背面 - 初始旋转 180 度 */
.flip-card-back {
background: white;
color: #333;
transform: rotateY(180deg);
/* 背面预先旋转 180 度，这样翻转时才能正确显示 */
}通过旋转内部层来实现翻转，支持 hover 和 click 两种触发方式：
/* Hover 触发翻转 */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Click 触发翻转（通过 JavaScript 添加 .flipped 类）*/
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}为点击触发的卡片添加交互逻辑：
// 获取所有点击触发的卡片
const clickCards = document.querySelectorAll('.flip-card.click-trigger');
// 为每张卡片添加点击事件
clickCards.forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
});