使用JS transform属性定位元素时CSS被JS覆盖的问题如何解决？

问题原因 #

你遇到的偏移问题核心是JS代码中额外添加的translatex(-50%) translatey(-50%)属性导致的：这段代码会将旋转的图片向左、向上偏移自身宽高的一半，直接覆盖了原本的元素位置，再加上两个固定定位的图片没有设置统一的top/left基准，自然会出现错位跳转的情况。

解决方案（保留滚动旋转逻辑的前提下） #

1. 调整CSS，统一两个图片的定位基准 #

给两张固定定位的图片设置相同的定位参数、宽高，保证初始状态完全叠加：

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

.guide img {
  /* 统一固定定位参数，要调整位置直接改top和left数值即可 */
  position: fixed;
  top: 50px;
  left: 50px;
  width: 150px;
  height: 150px;
  /* 显式指定旋转中心为图片中心，避免偏移 */
  transform-origin: center;
}

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

2. 修改JS代码，删除多余的偏移属性 #

transform默认的旋转中心就是元素中心，不需要额外加translate偏移，直接保留旋转逻辑即可：

var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    // 移除多余的translate偏移，仅保留旋转逻辑
    elem.style.transform = `rotate(${value}deg)`; 
});

3. 简化HTML代码 #

移除行内重复的定位样式：

<div class="guide">
    <img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" alt="箭头">
    <img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" alt="旋转标识">
</div>

如果确实需要保留JS中的translate写法，只需将两张图片的top/left设置为叠加位置的中心点坐标即可，例如图片宽高为150px、要放在top:50px left:50px的位置，就把top设为125px、left设为125px，偏移后就会和静止图片对齐。

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