求助：如何用3D矩阵实现图片叠加滚动效果（复刻苹果官网）

我试图复刻苹果官网Apple TV 4K页面第三部分的图片叠加滚动效果，目前已完成部分基础效果，但无法实现官网那种层级分明的图片叠加效果（参考图：Apple官网图片叠加效果）。

我已经给图片容器设置了overflow: hidden和transform-origin: bottom属性，但在3D矩阵（matrix）的运用以及图片定位逻辑上存在问题，以下是当前使用的JavaScript代码，希望能得到解决思路：

window.addEventListener("scroll", e => {
    const tv = document.querySelector("#tv").getBoundingClientRect()

    const x = document.querySelector("#x")
    const y = document.querySelector("#y")
    const z = document.querySelector("#z")
    const m = document.querySelector("#m")

    const b = document.querySelector("#b").getBoundingClientRect()
    const c = document.querySelector("#c").getBoundingClientRect()
    const d = document.querySelector("#d").getBoundingClientRect()

    {
        const diff = b.top - tv.bottom
        x.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
    }
    {
        const diff = c.top - tv.bottom
        y.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
    }
    {
        const diff = d.top - tv.bottom
        z.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
    }
})

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