Vue3+CSS 实现3D卡片动画

时间的情敌2025-10-31 14:13

3D 翻转卡片

实现思路

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

Vue3 代码结构

javascript 复制代码 
<template>
  <div class="container">
    <h1>Vue 3 3D卡片动画效果</h1>
    <div class="card-grid">
      <div
        v-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样式

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翻转卡片完整代码

javascript 复制代码 
<template>
  <div class="container">
    <h1>Vue 3 3D卡片动画效果</h1>
    <div class="card-grid">
      <div
        v-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>
相关推荐
阿登林6 小时前
Unity3D与Three.js构建3D可视化模型技术对比分析
开发语言·javascript·3d
小九今天不码代码6 小时前
CSS技巧：使用 box-shadow + outline 实现多重边框与圆角阴影完美结合
css·outline·box-shadow·多重边框·圆角边框·前端视觉效果·css3技巧
J_Xiong01176 小时前
【VLNs篇】11：Dynam3D: 动态分层3D令牌赋能视觉语言导航中的VLM
人工智能·算法·3d
吃饺子不吃馅6 小时前
Canvas 如何渲染富文本、图片、SVG 及其 Path 路径？
前端·svg·canvas
王六岁6 小时前
🐍 前端开发 0 基础学 Python 入门指南：f-strings 篇
前端·javascript·python
一道雷6 小时前
🚀 Vue Router 插件系统：让路由扩展变得简单优雅
前端·javascript·vue.js
辣辣y6 小时前
Tailwind CSS 使用指南
前端·css
wgb04096 小时前
vxe table 升级之后页面数据不显示解决方法
java·前端·javascript
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）