轮播图不够惊艳？试下这个立体卡片轮播图

说在前面

在日常的网页设计中，轮播图可以说是最常见的组件之一了。但我们看到的大多数轮播图，要么是简单的淡入淡出，要么是生硬的左右平移，早已让用户审美疲劳。能不能来点不一样的？

当然能，今天我们就来实现一个不一样的轮播图，融合"透视 + 旋转 + 缩放 + 层级"，打造一个立体卡片的轮播效果。

体验地址

codepen

在线地址 ：codepen.io/yongtaozhen...

码上掘金

在线地址 ：code.juejin.cn/pen/7642192...

实现代码

1、先把结构搭好

先用 app-shell 把轮播固定在视口内，再通过 fit-stage 做居中缩放，保证在不同分辨率的屏幕上都能正常显示完整。

css 复制代码

.app-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.fit-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--design-width) * 1px);
  height: calc(var(--design-height) * 1px);
  transform: translate(-50%, -50%) scale(var(--fit-scale));
  transform-origin: center center;
}

position: fixed + inset: 0 锁死整页
translate(-50%, -50%) 保证缩放前后始终居中
--fit-scale 统一控制整体比例，不会把布局拆散

让页面在不同尺寸下都能保持观感，视觉更稳。

2、双层 3D 透视

外层 viewport 给整体空间深度，内层中心卡片再做旋转/抬升/前推，立体感就出来了。

css 复制代码

.viewport {
  position: relative;
  height: 800px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.slide.center .card-bg {
  transform: rotateX(42deg) rotateY(8deg) rotateZ(1.5deg) translateY(-30px);
  box-shadow: 0 30px 38px rgba(0, 0, 0, 0.2);
}

.slide.center .card-img {
  transform: translate3d(0, -60%, 92px) scale(1.2);
  top: 40%;
}

perspective 决定观察距离，控制空间强弱
中心卡片背景做倾斜，图片再向 Z 轴推进
阴影和伪元素配合，强化"悬浮"感觉

中间卡片会自然成为焦点，不需要额外说明用户也知道当前选中的是哪张 👀。

3、轮播排布核心

javascript 复制代码

function normalizeOffset(offset, n) {
  if (offset > n / 2) return offset - n;
  if (offset < -n / 2) return offset + n;
  return offset;
}

function update() {
  const n = slides.length;

  slides.forEach((slide, i) => {
    let offset = normalizeOffset(i - current, n);
    const abs = Math.abs(offset);

    if (abs > 2) {
      slide.style.opacity = "0";
      slide.style.transform = "translate3d(-50%, -50%, -260px) scale(0.56)";
      slide.classList.remove("center");
      return;
    }

    const x = offset * 360;
    const scale = abs === 0 ? 1 : abs === 1 ? 0.7 : 0.52;

    slide.style.transform = `translate3d(calc(-50% + ${x}px), -50%, 0) scale(${scale})`;
    slide.style.opacity = abs === 2 ? "0.45" : "1";
    slide.style.zIndex = String(10 - abs);
    slide.classList.toggle("center", abs === 0);
  });
}

normalizeOffset 解决首尾衔接，轮播切换不会断层
按 abs 控制位移、缩放、透明度、层级
超出两侧范围的卡片直接弱化隐藏，画面更干净

源码地址

gitee

源码地址 ：gitee.com/zheng_yongt...

github

源码地址 ：github.com/yongtaozhen...

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

发送加群还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。