javascript - 使用变换和 js 在背景图像上旋转元素

Question

我有一个背景图像和另一个图像元素作为针。因此，您会在摘要页面上方看到 3 个选项卡。我的目标是在您单击按钮时更改指针的位置。但是有一些问题，比如如果你先点击第二个或第三个选项卡，针会移动错误的方向。

如果您在第 3 个和第 1 个选项卡之间移动，针的底部会移出黑色小圆圈。

如何在没有任何视觉错误的情况下实现我的目的？也许还有其他方法可以实现这一目标？

function asama3() {
  document.getElementById("ibre").style.transform = "rotate(-68deg)";
  document.getElementById("ibre").style.left = "210px";
  document.getElementById("ibre").style.top = "178px";
}
function asama2() {
  document.getElementById("ibre").style.transform = "rotate(-107deg)";
  document.getElementById("ibre").style.left = "157px";
  document.getElementById("ibre").style.top = "180px";
}
function asama1() {
  document.getElementById("ibre").style.transform = "rotate(-145deg)";
  document.getElementById("ibre").style.left = "113px";
  document.getElementById("ibre").style.top = "211px";
}

#ibre {
    width:150px;
    position: absolute;
    left: 100px;
    top: 258px;
    transition: all 1s;
}

<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
        <div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
        <div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
        <div style="clear:both;"></div>
        
    <div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
    <div style=""><img id="ibre" style=""  src="https://i.hizliresim.com/Hmuavw.png"></div>
    </div>

Answer 1

当它在中心旋转时，您可以创建一个隐藏的 div 并将它们都包裹在一个外部 div 中，并确保中心与黑点对齐:

function asama3() {
  document.getElementById("outer").style.transform = "rotate(68deg)";
}

function asama2() {
  document.getElementById("outer").style.transform = "rotate(107deg)";
}

function asama1() {
  document.getElementById("outer").style.transform = "rotate(145deg)";
}

#outer {
  display: flex;
  width: 300px;
  height: 5px;
  position: absolute;
  left: 108px;
  top: 278px;
  transition: all 1s;
}

#ibre {
  width: 150px;
  height: 5px;
  border-radius: 5px;
  background-color: #070707;
}

#hidden {
  width: 150px;
  height: 5px;
  border-radius: 5px;
  background-color: transparent;
}

<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
  <h1 onclick="asama1()">1. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
  <h1 onclick="asama2()">2. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
  <h1 onclick="asama3()">3. aşama</h1>
</div>
<div style="clear:both;"></div>

<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
  <div id="outer">
    <div id="ibre"></div>

    <div id="hidden"></div>
  </div>
</div>

这样它就可以在那个点上旋转到你需要它指向的任何地方。