使用translateZ()实现背景图片视差滚动失效问题排查

是的，直接给带有背景图片的元素使用transform: translateZ()确实不会产生预期的视差效果——背景图是附着在元素平面上的装饰层，不会独立参与3D变换的空间计算，3D变换只作用于元素本身的盒模型，而非它的背景。

你的代码问题分析 #

1. 父容器.skooma__section-1设置了overflow-y: scroll/auto，这会让视差效果局限在容器内部滚动，而非基于页面整体滚动，不符合常规视差的触发逻辑。
2. .image-1__image的transform: translateZ(10px)作用在元素本身，但背景图不会跟着在3D空间位移，因为背景是元素的“附属”，不是独立的可变换元素。

解决方法 #

方法1：改用<img>标签（最直接）

把背景图换成独立的<img>元素，3D变换会直接作用于图片本身，从而产生视差：

修改后的HTML：

<div class="skooma__section-1">
  <div class="skooma__image-1 image-media">
    <img src="./media/skooma-1.jpg" alt="" class="image-1__image image-media">
  </div>
</div>

调整后的SCSS：

.skooma__section-1{
  width: 90vw;
  margin-top: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  // 移除容器内部滚动，视差基于页面滚动
  overflow-x: hidden;
  perspective: 3px;
  transform-style: preserve-3d;
}
.skooma__image-1{
  height: 40rem;
  width: 40rem;
  clip-path: polygon(5% 15%, 80% 20%, 95% 85%, 20% 80%);
  position: relative;
  overflow: hidden; // 裁剪图片超出的部分
}
.image-1__image{
  height: 100%;
  width: 100%;
  object-fit: cover;
  // translateZ负值让图片“更远”，滚动时位移幅度更大，scale抵消缩小效果
  transform: translateZ(-1px) scale(1.33);
  position: absolute;
  top: 0;
  left: 0;
}

方法2：保留背景图，用伪元素实现

如果必须使用背景图，可以把背景图放到伪元素上，给伪元素添加3D变换：

调整后的SCSS：

.skooma__section-1{
  // 同方法1，移除内部滚动
  width: 90vw;
  margin-top: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  overflow-x: hidden;
  perspective: 3px;
  transform-style: preserve-3d;
}
.skooma__image-1{
  height: 40rem;
  width: 40rem;
  clip-path: polygon(5% 15%, 80% 20%, 95% 85%, 20% 80%);
  position: relative;
}
.image-1__image{
  height: 40rem;
  width: 40rem;
  position: relative;
}
// 用伪元素承载背景图并添加3D变换
.image-1__image::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./media/skooma-1.jpg);
  background-size: 40rem 40rem;
  transform: translateZ(-1px) scale(1.33);
  z-index: -1;
}

关键注意点 #

• 视差效果依赖页面整体滚动，所以父容器不要设置overflow-y: scroll/auto，否则滚动事件仅作用于容器内部，无法触发视差。
• translateZ的数值决定位移幅度：负值让元素视觉上更远，滚动时位移更大；正值则更“近”，位移更小。配合scale可以避免元素因3D变换而缩小。

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