css 如何旋转图像以面对鼠标光标

我有一堆图像分散在英雄部分，我希望他们都旋转，以面对鼠标光标。

的数据
这是我现在的代码：

*{
    box-sizing: border-box;
}
body{
    margin: 0;
}

.hero{
    background-image: linear-gradient(to right, #222125 7px, transparent 1px),
                      linear-gradient(to bottom, #222125 7px, transparent 1px);
    background-size: 20vw 20vw; /* Adjust grid size */
    background-color: #242529;
    height: 100vh;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.human{
    position: absolute;
    width: 8.6%;
    bottom: -20vh;
}
.guns{
    position: absolute;
    width: 100%;
    height: 100%;
}
.gun{
    position: absolute;
    border: 2px solid red;
}

#gun1{
    right: 30%;
    bottom: 30%;

    width: 5vw;
    rotate: 0deg;
    scale: -1 1;
}
#gun2{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun3{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun4{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun5{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun6{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun7{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun8{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun9{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun10{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun11{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun12{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun13{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun14{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun15{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun16{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun17{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun18{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun19{
    right: 27%;
    top: 40%;

    width: 9.5vw;
    rotate: 330deg;
}
#gun20{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun21{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun22{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun23{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun24{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun25{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun26{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}
#gun27{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 5vw;
    rotate: 0deg;
}

个字符
每个单独的枪具有类名“枪”和ID“枪1、枪2、枪3等”。
我试过其他人的代码，但不能正确地实现它，chatgpt给了我一些代码，但只在某些位置工作。提前感谢。

我创建了一个例子，你可以测试它，希望它的帮助

<style>
  .gun {
    width: 100px;
    height: 30px;
    background-color: red;
    position: fixed;
    left: 500px;
    top: 500px;
    display: flex;
  }
</style>
<div class="gun">
  <div style="width: 100px;height: 20px;background-color: red;"></div>
  <div style="width: 50px;height: 50px;background-color: red;">gan</div>
</div>
<script>
  window.addEventListener('mousemove', e => {
    const {
      clientX,
      clientY
    } = e
    const x = clientX - 500
    const y = clientY - 500
    let deg = Math.atan(y /x) * (180 / Math.PI)
    if (x > 0 && y < 0) deg = 90
    if (x > 0 && y > 0) deg = -90
    const gun = document.querySelector('.gun')
    gun.style.transform = `rotate(${deg}deg)`
  })
</script>

字符串

css 如何旋转图像以面对鼠标光标

1条答案

相关问题

热门标签

最新问答