使用 JS 转换属性定位元素（CSS get 被 JS 覆盖）

Question

我正在尝试将两个图像放在彼此的顶部，并让其中一个在滚动时旋转而另一个不旋转 - 这有效，除了我无法在我的元素中定位和缩放我的元素CSS。一旦我开始滚动，带有 JS 的图像就会跳到角落，而另一个则保持原样。我相信这是因为我的 JS 覆盖了我的 CSS 属性，但是有什么办法可以解决这个问题吗？我可以在维护我的 JS 的同时定位我的两个元素吗？

var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; 
});

body {
  height: 200vh;
  background: darkblue;
}

.guide {
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

<div class="guide" style="position:relative">
    <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
    <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>

Answer 1

我不确定您想要通过使用translatex(-50%) translatey(-50%) 实现什么，但这会导致图像中心位于父元素的左上角。如果你只是使用 elem.style.transform = `rotate(${value}deg)`; 它会原地旋转。

Answer 2

从您的代码中删除翻译。

var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    elem.style.transform = `rotate(${value}deg)`; 
});

body {
  height: 200vh;
  background: darkblue;
}

.guide {
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

<div class="guide" style="position:relative">
    <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
    <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>

使用 JS 转换属性定位元素（CSS get 被 JS 覆盖）

Positioning of element with JS transform properties (CSS get's overwritten by JS)

javascript

css

scroll

position

css-position