当前位置：首页 > news >正文

Vue3+CSS 实现3D卡片动画

news 2025/10/31 8:59:15

3D 翻转卡片

实现思路

使用CSS3的3D变换属性实现卡片翻转效果
通过伪元素创建光泽动画效果
使用渐变色背景提升视觉体验

Vue3 代码结构

<template><div class="container"><h1>Vue 3 3D卡片动画效果</h1><div class="card-grid"><divv-for="(card, index) in cards":key="index"class="card"><!-- 卡片内层容器（用于3D旋转） --><div class="card-inner"><!-- 正面 --><div class="card-face card-front shine-effect"><div class="card-icon">{{ card.frontIcon }}</div><div class="card-title">{{ card.frontTitle }}</div><div class="card-content">{{ card.frontContent }}</div></div><!-- 背面 --><div class="card-face card-back"><div class="card-title">{{ card.backTitle }}</div><div class="card-content">{{ card.backContent }}</div><button class="card-button">了解更多</button></div></div></div></div></div>
</template>
<script setup>
import { ref } from 'vue';// 定义卡片数据（前后内容）
const cards = ref([{frontIcon: '💡',frontTitle: '创意设计',frontContent: '探索无限创意可能性',backTitle: '创意解决方案',backContent: '我们提供独特的设计思路和创意解决方案，帮助您的项目脱颖而出。'},{frontIcon: '🚀',frontTitle: '极致性能',frontContent: '体验卓越的性能表现',backTitle: '性能优化',backContent: '通过先进的技术优化，确保您的应用运行流畅、响应迅速。'},{frontIcon: '❤️',frontTitle: '用户体验',frontContent: '以用户为中心的设计',backTitle: '用户至上',backContent: '我们始终将用户体验放在首位，打造直观易用的交互界面。'}
]);
</script>

核心CSS样式

<style scoped>
/* 容器样式 */
.container {display: flex;flex-direction: column;align-items: center;max-width: 100%;padding: 20px;background: linear-gradient(45deg, #2c3e50, #4a69bd);font-family: 'Arial', sans-serif;overflow: hidden;height: 90dvh;padding-top: 50px;
}/* 卡片网格布局 */
.card-grid {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;width: 100%;
}/* 卡片容器 - 关键3D透视设置 */
.card {width: 300px;height: 400px;perspective: 1500px; /* 3D透视效果 */cursor: pointer;
}/* 卡片内层 - 实现3D翻转 */
.card-inner {position: relative;width: 100%;height: 100%;transform-style: preserve-3d; /* 保持3D空间 */transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);border-radius: 15px;
}/* 悬停时翻转卡片 */
.card:hover .card-inner {transform: rotateY(180deg);
}/* 卡片正面和背面共用样式 */
.card-face {position: absolute;width: 100%;height: 100%;backface-visibility: hidden; /* 隐藏背面 */border-radius: 15px;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;overflow: hidden;
}/* 正面样式 */
.card-front {background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);color: white;
}/* 背面样式 - 初始时已翻转180度 */
.card-back {background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);color: white;transform: rotateY(180deg);
}/* 光泽效果 */
.shine-effect::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: rgba(255, 255, 255, 0.1);transform: rotate(45deg);transition: all 0.6s ease;pointer-events: none;
}.card:hover .shine-effect::before {transform: translate(50%, 50%) rotate(45deg);
}
</style>

3D翻转卡片完整代码

<template><div class="container"><h1>Vue 3 3D卡片动画效果</h1><div class="card-grid"><divv-for="(card, index) in cards":key="index"class="card"><!-- 卡片内层容器（用于3D旋转） --><div class="card-inner"><!-- 正面 --><div class="card-face card-front shine-effect"><div class="card-icon">{{ card.frontIcon }}</div><div class="card-title">{{ card.frontTitle }}</div><div class="card-content">{{ card.frontContent }}</div></div><!-- 背面 --><div class="card-face card-back"><div class="card-title">{{ card.backTitle }}</div><div class="card-content">{{ card.backContent }}</div><button class="card-button">了解更多</button></div></div></div></div></div>
</template><script setup>
import { ref } from 'vue';// 定义卡片数据（前后内容）
const cards = ref([{frontIcon: '💡',frontTitle: '创意设计',frontContent: '探索无限创意可能性',backTitle: '创意解决方案',backContent: '我们提供独特的设计思路和创意解决方案，帮助您的项目脱颖而出。'},{frontIcon: '🚀',frontTitle: '极致性能',frontContent: '体验卓越的性能表现',backTitle: '性能优化',backContent: '通过先进的技术优化，确保您的应用运行流畅、响应迅速。'},{frontIcon: '❤️',frontTitle: '用户体验',frontContent: '以用户为中心的设计',backTitle: '用户至上',backContent: '我们始终将用户体验放在首位，打造直观易用的交互界面。'}
]);
</script><style scoped>.container {display: flex;flex-direction: column;align-items: center;max-width: 100%;padding: 20px;background: linear-gradient(45deg, #2c3e50, #4a69bd);font-family: 'Arial', sans-serif;overflow: hidden;height: 90dvh;padding-top: 50px;
}h1 {text-align: center;color: white;margin-bottom: 40px;font-size: 36px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}.card-grid {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;width: 100%;
}/* 卡片容器 */
.card {width: 300px;height: 400px;perspective: 1500px;cursor: pointer;
}/* 卡片内层 - 实现3D翻转 */
.card-inner {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);border-radius: 15px;
}.card:hover .card-inner {transform: rotateY(180deg);
}/* 正面与背面共用样式 */
.card-face {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;border-radius: 15px;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;overflow: hidden;
}/* 正面样式 */
.card-front {background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);color: white;
}/* 背面样式 */
.card-back {background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);color: white;transform: rotateY(180deg);
}/* 图标 */
.card-icon {font-size: 60px;margin-bottom: 20px;text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}/* 标题 */
.card-title {font-size: 28px;font-weight: bold;margin-bottom: 15px;text-align: center;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}/* 内容文本 */
.card-content {text-align: center;line-height: 1.6;font-size: 16px;padding: 0 15px;
}/* 按钮 */
.card-button {margin-top: 25px;padding: 12px 30px;background: rgba(255, 255, 255, 0.2);border: 2px solid white;color: white;border-radius: 50px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;backdrop-filter: blur(5px);
}.card-button:hover {background: white;color: #ff758c;transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}/* 光泽效果 */
.shine-effect::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: rgba(255, 255, 255, 0.1);transform: rotate(45deg);transition: all 0.6s ease;pointer-events: none;
}.card:hover .shine-effect::before {transform: translate(50%, 50%) rotate(45deg);
}
</style>