SwiperJS 3D立方体效果初始角度修改 实现滚动时显示两个相邻面

通过给swiper外层容器添加固定3D旋转角度，打破默认的正面对齐布局，即可实现同时展示两个相邻立方体面的效果，不需要改动Swiper cube效果的内部计算逻辑。原有HTML结构不需要做任何修改，直接复用即可。

CSS 调整项 #

• 给.swiper-container补充3D透视与旋转配置，替换原有基础样式：

.swiper-container {
  width: 300px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -150px;
  margin-top: -150px;
  /* 新增3D渲染配置 */
  perspective: 1200px;
  transform: rotateY(-30deg) rotateX(5deg);
  transform-style: preserve-3d;
}

• rotateY的取值直接决定两个相邻面的可视占比，想要两个面宽度均等就调到-45度，想要正面占视觉主导、侧面仅露窄边就调到-15~-20度区间

JS 配置调整项 #

• 关闭cube效果内置的错位阴影，避免外层旋转后阴影显示位置偏移：

var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  grabCursor: true,
  speed: 600,
  cubeEffect: {
    shadow: false,
    slideShadows: false,
    shadowOffset: 20,
    shadowScale: 0.94,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

注意事项 #

• 切换动画全程保持固定斜视角，每次立方体滚动换面完成后，都会维持初始的倾斜角度，不会跳回单一面正对的默认状态
• 触摸交互如果出现坐标偏移，升级到最新正式版Swiper即可解决，新版本已经适配了带transform外层容器的触摸映射计算
• 如果需要保留阴影效果，不要用cube内置的阴影，直接给.swiper-container加CSS的drop-shadow投影即可，不会随角度出现错位

内容的提问来源于stack exchange，提问作者Simon