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

1. 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翻转卡片技术实现

卡片结构层次：

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

CSS 3D翻转核心代码：

.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); /* 背面初始状态翻转 */
}

图片浮动动画：

.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); }
}

霓虹光效交互：

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

3.实现效果

小羊咩咩静态网站