使用JS旋转图像时如何添加边距顶部 [英] How to add a margin top when image is rotating with JS
本文介绍了使用JS旋转图像时如何添加边距顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当图像旋转90度时,我想在图像顶部添加边距.这就是我旋转图像的方式:
I want to add margin to the top of the image when it is rotated by 90 degrees. This is how I rotate the image:
const img = document.querySelector("#mocci-logo")
document.addEventListener("scroll", (e) => {
if(!window.scrollY) {
img.style.transform = "rotate(0deg)"
} else {
img.style.transform = "rotate(-90deg)"
}
})
我知道这可能很简单,但是我是一个初学者.因此,希望有人可以告诉我该怎么做.谢谢!
I know it's might be simple, but I'm a beginner. So hopefully someone could show me how to do that. Thanks!
推荐答案
尝试一下:
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";
}
})
这篇关于使用JS旋转图像时如何添加边距顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文