如何旋转图像以面向鼠标光标

问题描述 投票：0回答：1

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

这是我当前的代码：

*{
    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;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="hero">
        <img src="assets/human.png" class="human">

        <div class="guns">
            <img src="assets/guns/9mm.png" class="gun" id="gun1">
            <img src="assets/guns/120 cannon.png" class="gun" id="gun2">
            <img src="assets/guns/crystal gun.png" class="gun" id="gun3">
            <img src="assets/guns/dissassembler.png" class="gun" id="gun4">
            <img src="assets/guns/flamethrower.png" class="gun" id="gun5">
            <img src="assets/guns/flintlock.png" class="gun" id="gun6">
            <img src="assets/guns/freezeray.png" class="gun" id="gun7">
            <img src="assets/guns/g1 smg.png" class="gun" id="gun8">
            <img src="assets/guns/grenade launcher.png" class="gun" id="gun9">
            <img src="assets/guns/Handcannon.png" class="gun" id="gun10">
            <img src="assets/guns/heatray.png" class="gun" id="gun11">
            <img src="assets/guns/ion cannon.png" class="gun" id="gun12">
            <img src="assets/guns/lmg.png" class="gun" id="gun13">
            <img src="assets/guns/machine blaster.png" class="gun" id="gun14">
            <img src="assets/guns/minigun.png" class="gun" id="gun15">
            <img src="assets/guns/missile launcher.png" class="gun" id="gun16">
            <img src="assets/guns/pistol.png" class="gun" id="gun17">
            <img src="assets/guns/pulse drum.png" class="gun" id="gun18">
            <img src="assets/guns/revolver.png" class="gun" id="gun19">
            <img src="assets/guns/rigidifier.png" class="gun" id="gun20">
            <img src="assets/guns/rpg.png" class="gun" id="gun21">
            <img src="assets/guns/shotgun.png" class="gun" id="gun22">
            <img src="assets/guns/smg.png" class="gun" id="gun23">
            <img src="assets/guns/soviet smg.png" class="gun" id="gun24">
            <img src="assets/guns/spike rifle.png" class="gun" id="gun25">
            <img src="assets/guns/stormban.png" class="gun" id="gun26">
            <img src="assets/guns/stunner.png" class="gun" id="gun27">
        </div>
    </section>

    <script src="guns.js"></script>
</body>
</html>

每支枪都有类名“gun”和 ID“gun1、gun2、gun3 等..”

我尝试过其他人的代码，但无法正确实现它，chatgpt 给我的代码在某种程度上可以工作，但仅限于某些位置。预先感谢。

javascript html css pointers mouse
1个回答
0
投票

我创建了一个示例，您可以测试它，希望它有帮助 

<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.