transform-style: preserve-3d, Object.assign(), 비효과

document.addEventListener('mousemove', e => {
	Object.assign(document.documentElement, {
		style: `
		--move-x: ${(e.clientX - window.innerWidth / 2) * -.01}deg;
		--move-y: ${(e.clientY - window.innerHeight / 2) * .01}deg;
		`
	})
})

<section class="layers">
    <div class="layers__container">
        <div class="layers__item layer-1" style="background-image:url(3d_lens/img/layer-1.jpg)"></div>
        <div class="layers__item layer-2" style="background-image:url(3d_lens/img/layer-2.png)"></div>
        <div class="layers__item layer-3">
            <div class="hero-content">
                <h1>H1 Main Title <br>HTML / CSS</h1>
                <div class="heto-content__p">small text</div>
            </div>
        </div>
        <div class="layers__item layer-4">
            <canvas class="rain"></canvas>
        </div>
        <div class="layers__item layer-5" style="background-image:url(3d_lens/img/layer-5.png)"></div>
        <div class="layers__item layer-6" style="background-image:url(3d_lens/img/layer-6.png)"></div>
    </div>
</section>

<script src="3d_lens/libs/rain.js"></script>

:root{
    --index: calc(1vh + 1vw);
}
body{background-color: #000; color: #fff;}
.layers{perspective: 1000px; overflow: hidden; text-align: center;}
h1{font-size: 100px; line-height: 1;}
.layers__container{height: 100vh; 
    transform-style: preserve-3d; 
    transform: rotateX(var(--move-y)) rotateY(var(--move-x));}
.layers__item{position: absolute;inset: -5vw; bottom: -5vw; 
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center;}
.layer-1{transform: translateZ(0);}
.layer-2{transform: translateZ(80px);}
.layer-3{transform: translateZ(180px);}
.layer-4{transform: translateZ(280px);}
.layer-5{transform: translateZ(380px);}
.layer-6{transform: translateZ(480px);}
.layer-4, .layer-5, .layer-6 {pointer-events: none;}