使用JS旋轉圖像時如何添加邊距頂部

Question

當圖像旋轉 90 度時，我想在圖像頂部添加邊距。 這就是我旋轉圖像的方式：

const img = document.querySelector("#mocci-logo")

document.addEventListener("scroll", (e) => {
  if(!window.scrollY) {
    img.style.transform = "rotate(0deg)"
  } else {
    img.style.transform = "rotate(-90deg)"
  }
})

我知道這可能很簡單，但我是初學者。 所以希望有人能告訴我如何做到這一點。 謝謝！

Answer 1

嘗試這個：

const img = document.querySelector("#mocci-logo")

document.addEventListener("scroll", (e) => {
  if(!window.scrollY) {
    img.style.transform = "rotate(0deg)"
    img.style.marginTop = "0px"; // This can also be 0 or "0".
  } else {
    img.style.transform = "rotate(-90deg)"
    img.style.marginTop = "60px";
  }
})