CSS如何实现背景图视差滚动？perspective多层

perspective

<div class="parallax-wrapper">
    <div class="parallax-group">
        <div class="parallax-layer layer-back"></div>
        <div class="parallax-layer layer-base"></div>
        <div class="parallax-layer layer-foreground">
            <!-- 你的主要内容放在这里，它将像普通页面一样滚动 -->
            <section class="content-section">
                <h2>欢迎来到视差世界</h2>
                <p>这里的内容会随着页面的滚动而正常显示，但背景图层会以不同的速度移动，创造出深度的幻觉。</p>
                <p>你可以想象一下，这就像透过玻璃看风景，玻璃上的灰尘和指纹（前景）移动得最快，窗外的树木（中景）移动得慢一些，而远处的山峦（背景）几乎不动。</p>
                <p>这种效果在很多现代网页设计中被广泛应用，尤其是在需要强调视觉叙事和沉浸感的场景。不过，在实际应用中，还需要注意性能优化和兼容性问题，毕竟3D变换对浏览器来说并非毫无压力。</p>
                <p>继续向下滚动，体验不同图层带来的视差效果。</p>
                <p>内容越长，滚动效果越明显。</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, deleniti. Facilis officiis, ipsa doloremque unde fuga, aliquid cumque perferendis, laborum reprehenderit illum? Voluptatibus nulla, nisi asperiores dolor ad eos. Provident.</p>
                <p>Quidem, quis? Voluptate, quas. Voluptatem officiis, rem, provident ipsa dolor debitis voluptatum, sapiente facilis perferendis eaque aspernatur ab nesciunt! Quos minus molestias dolore, illum consectetur culpa. Ipsa, non?</p>
                <p>Dolores ut ad, iste voluptatem omnis, sapiente quo animi, vel vitae esse sint expedita! Laborum, similique recusandae. Ipsa, rerum? Accusantium, vitae. Quas ab provident sequi voluptatum voluptatem.</p>
                <p>Facilis dolores rem, deserunt vero cupiditate, cumque iste, ut quis dicta non ipsa. Quas, debitis. Quaerat dolore laboriosam, ipsum iste, sint sequi, officia minima id dignissimos nulla.</p>
                <p>Earum, esse. Dignissimos ducimus, eveniet exercitationem dolor illum, sapiente nesciunt, assumenda at quos vero cumque voluptatum quis. Quisquam, quos! Adipisci, quibusdam!</p>
                <p>Voluptate fugit amet necessitatibus, rerum vero assumenda! Sunt, nemo. Ullam, provident! Quia, molestias. Doloremque, quae!</p>
            </section>
        </div>
    </div>
</div>

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 阻止body自身的滚动条 */
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.parallax-wrapper {
    height: 100%;
    overflow-x: hidden; /* 确保没有水平滚动条 */
    overflow-y: scroll; /* 核心：让这个容器可滚动 */
    perspective: 1px; /* 关键！定义了视点到z=0平面的距离 */
    perspective-origin: 50% 50%; /* 视点中心 */
    /* 某些浏览器（尤其是移动端）可能需要此属性来优化滚动性能 */
    -webkit-overflow-scrolling: touch;
}

.parallax-group {
    position: relative;
    height: 100vh; /* 确保组有足够的高度来展示背景 */
    transform-style: preserve-3d; /* 确保子元素在3D空间中 */
}

.parallax-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 背景层：在Z轴上最远，移动最慢 */
.layer-back {
    background-image: url('https://picsum.photos/id/1018/1920/1080'); /* 示例图片 */
    /* 计算公式：scale = 1 + (-translateZ / perspective) */
    /* 如果 perspective: 1px, translateZ: -2px, 那么 scale = 1 + (2/1) = 3 */
    transform: translateZ(-2px) scale(3);
}

/* 中间层：比背景层近，移动速度适中 */
.layer-base {
    background-image: url('https://picsum.photos/id/1015/1920/1080'); /* 示例图片 */
    transform: translateZ(-1px) scale(2);
}

/* 前景层：在Z轴上最近，作为内容层，移动最快（或保持正常滚动） */
.layer-foreground {
    background-image: url('https://picsum.photos/id/1016/1920/1080'); /* 示例图片 */
    /* 这里的translateZ(0)表示它在视点平面，无需缩放 */
    transform: translateZ(0);
    /* 如果希望前景层是内容层，通常不设置背景图，或者背景图是透明的PNG */
    /* 为了演示多层背景，这里还是放了背景图 */
}

.content-section {
    position: relative; /* 确保内容在Z轴上正确堆叠，且可以交互 */
    z-index: 1; /* 确保内容在所有背景图层之上 */
    background-color: rgba(255, 255, 255, 0.9); /* 让内容区域有背景，便于阅读 */
    padding: 40px;
    min-height: 200vh; /* 制造足够的滚动区域 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
}

/* 确保内容不会被背景层遮挡 */
.parallax-group > .parallax-layer:not(.layer-foreground) {
    pointer-events: none; /* 禁用背景层的鼠标事件，确保内容可交互 */
}

perspective

perspective

perspective

perspective

translateZ()

perspective

translateZ()

scale()

scale

perspective

1px

perspective

translateZ

scale

z-index