如何使用JavaScript在图片旋转时添加顶部外边距

嘿，作为编程新手能写出这样的滚动监听代码已经很棒啦！要实现旋转时添加顶部外边距其实很简单，只需要在切换旋转角度的同时，同步修改图片的marginTop（或者paddingTop，看你需要哪种间距效果）样式就可以了。

修改后的代码示例 #

const img = document.querySelector("#mocci-logo")
document.addEventListener("scroll", (e) => {
  if(!window.scrollY) {
    // 回到顶部时，重置旋转角度和外边距
    img.style.transform = "rotate(0deg)"
    img.style.marginTop = "0"
  } else {
    // 滚动时，应用旋转并添加顶部外边距（数值可以自己调整）
    img.style.transform = "rotate(-90deg)"
    img.style.marginTop = "20px"
  }
})

额外小技巧：添加平滑过渡效果 #

如果想让旋转和外边距变化的过程更自然，你可以提前在CSS里给图片加上过渡属性：

#mocci-logo {
  transition: all 0.3s ease; /* 0.3s是过渡时长，ease是缓动效果，都可以按需调整 */
}

这样滚动时图片的变化会更流畅，不会显得生硬~

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