CSS：使用变换将元素移动到 DOM 上的特定位置

Question

我有一个图像（svg），在加载时从页面中间开始。 当用户向下滚动时，我想让该图像向上和向左漂移，以便最终固定在左上角。
我尝试使用带有滚动编号的翻译，但我觉得这是一个关于图像将在哪里结束以及它采用什么路径的猜谜游戏。 这是我到目前为止所拥有的。

 window.addEventListener('scroll', function(evt) { let image = document.getElementById('image'); let scrollY = window.pageYOffset; // how do I use the scrollY to accomplish this? image.style.transform =??

 <div style="text-align: center; background: blue; height: 900px;"> <img id="image" style=" margin-top: 200px; " src="mySvg.svg" /> </div>

Answer 1

用于工作 document.getElementById('image'); 需要有对应的元素。

<img id="image" style=" margin-top: 200px; " src="mySvg.svg" />