视差滚动效果的核心是通过让不同层级的元素在页面滚动时产生不同的位移速度，从而模拟出近快远慢的视觉差，而CSS中的perspective属性和transform相关属性是实现这种效果的关键。
视差滚动的基本原理
视差滚动本质是控制不同元素的滚动偏移量，通常我们会把页面元素分为背景层、中间层、前景层三个层级，给不同层级设置不同的滚动速度，就能产生空间纵深感。在CSS实现中，我们一般会用到容器的perspective属性来创建3D空间，再结合translateZ属性调整元素的Z轴位置，最终通过滚动时的位移差异实现视差效果。
perspective属性的作用
perspective属性用于设置3D元素的透视点距离，也就是观察者与z=0平面的距离，单位是像素。它的作用是为元素创建3D透视上下文，让元素的Z轴位移产生近大远小的透视效果。如果父容器没有设置perspective，子元素的translateZ属性不会产生透视相关的位移变化，也就无法实现视差滚动需要的层级速度差异。
perspective有两种设置方式，一种是直接写在父容器上作为属性，另一种是用transform: perspective()的形式写在子元素上，两种方式的效果略有区别，实现视差滚动时更推荐直接设置在父容器上，这样可以统一整个容器的透视规则。
完整实现步骤与代码示例
1. 基础HTML结构
我们先搭建包含不同层级元素的页面结构，背景层、内容层、前景层分别对应不同的视差速度：
<div class="parallax-container"> <div class="layer bg-layer">背景层</div> <div class="layer content-layer">内容层</div> <div class="layer front-layer">前景层</div> </div>
2. CSS样式设置
接下来给容器设置perspective，再给不同层级的元素设置不同的translateZ值，实现视差效果：
/* 视差容器，设置透视距离 */
.parallax-container {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
/* 设置透视点距离，值越小透视效果越强 */
perspective: 1px;
perspective-origin: center center;
}
/* 通用层级样式 */
.layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 背景层，Z轴负向偏移，滚动速度最慢 */
.bg-layer {
background: url(https://ipipp.com/bg.jpg) center/cover no-repeat;
/* Z轴设为-1，根据透视规则，滚动速度会比普通元素慢 */
transform: translateZ(-1px) scale(2);
/* scale(2)是为了抵消translateZ带来的缩小效果，因为Z轴负向偏移会让元素看起来变小 */
z-index: 1;
}
/* 内容层，Z轴为0，正常滚动速度 */
.content-layer {
background: rgba(255,255,255,0.8);
padding: 20px;
transform: translateZ(0);
z-index: 2;
}
/* 前景层，Z轴正向偏移，滚动速度最快 */
.front-layer {
background: rgba(0,0,0,0.3);
transform: translateZ(1px);
z-index: 3;
}
3. 关键规则说明
这里有几个需要注意的点：
- perspective的值越小，透视效果越明显，不同层级的滚动速度差异越大，一般设置在1px到10px之间比较合适
- translateZ为负值的元素会产生缩小效果，需要通过scale放大来保持元素显示尺寸正常，放大的倍率是 (perspective - translateZ值) / perspective，比如perspective是1px，translateZ是-1px，放大倍率就是(1 - (-1))/1=2，所以设置scale(2)
- translateZ为正值的元素会产生放大效果，不需要额外调整scale，滚动速度会比正常元素快
兼容性说明
这种实现方式基于CSS 3D变换，目前所有现代浏览器都支持，包括Chrome、Firefox、Safari、Edge等，如果需要兼容旧版IE浏览器，这种方案不适用，需要改用JavaScript监听滚动事件计算偏移量的方式实现。
常见问题解答
为什么设置了perspective还是没有视差效果？
首先检查是否给子元素设置了translateZ属性，没有Z轴位移的话不会产生速度差异；其次检查容器的overflow是否设置为滚动，只有容器滚动时才会触发视差效果；最后检查perspective是否设置在了滚动容器上，而不是子元素上。
perspective值设置多大合适？
一般根据想要的效果强度调整，想要差异明显就设置1px到3px，想要差异平缓就设置5px到10px，不建议设置太大，否则透视效果会非常微弱，几乎看不到视差差异。
CSS视差滚动perspectivetransform修改时间：2026-06-09 04:51:26