CSS进阶 | 不用一行JS！用纯CSS打造会动的现代化单页应用（3D翻转卡片）

jingling5552025-10-25 19:56

1. HTML布局结构

html 复制代码

<section class="hot-product py-5" id="section2">
  <div class="container py-5">
    <!-- 标题区域 -->
    <h2 class="text-center fw-bold display-4">音乐作品</h2>
    <p class="text-center fs-6 mt-3 info">描述文字...</p>
    
    <!-- 卡片组布局 -->
    <div class="row mt-5">
      <div class="col-md-4 mt-3">
        <!-- 单个卡片结构 -->
      </div>
    </div>
  </div>
</section>

技术特点：

使用Bootstrap的栅格系统 col-md-4 实现三栏响应式布局

在大屏幕（≥768px）下显示三栏，小屏幕下自动堆叠

通过 mt-3 添加垂直间距，确保卡片间的呼吸感

2. 3D翻转卡片技术实现

卡片结构层次：

html 复制代码

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

CSS 3D翻转核心代码：

javascript 复制代码

.card {
  perspective: 1000px; /* 3D透视效果 */
  height: 600px;
  background-color: var(--lay-card-bg);
}

.card .card-inner {
  transition: transform 0.8s;
  transform-style: preserve-3d; /* 保持3D变换 */
}

.card:hover .card-inner {
  transform: rotateY(180deg); /* 悬停时翻转180度 */
}

.card-front, .card-back {
  position: absolute;
  backface-visibility: hidden; /* 隐藏背面 */
}

.card-back {
  transform: rotateY(180deg); /* 背面初始状态翻转 */
}

图片浮动动画：

javascript 复制代码

.card .card-img img {
  animation: move 5s ease-in-out infinite;
}

@keyframes move {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

霓虹光效交互：

javascript 复制代码

.card-body .btn:hover {
  box-shadow: var(--neon-glow); /* 使用CSS变量定义的光效 */
}

3.实现效果

小羊咩咩静态网站