使用 transform 和 js 在背景图像上旋转一个元素

Question

我有一个背景图片和另一个作为指针的图片元素。因此，在代码段页面上方会看到3个选项卡。我的目标是在单击按钮时更改指针的位置。但存在一些问题，例如，如果您首先单击第2或第3个选项卡，则指针会向错误的方向移动。

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

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

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>

- kkakaossski

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>

这样它会在那个点上旋转，指向你需要的方向。

- Daniel_Knights

---

太好了。我会根据我的需求进行编辑，非常完美，谢谢！ - kkakaossski

Answer 2

像这样，我想

function asama3() {
  document.getElementById("ibre").style.transform = "rotate(140deg)";
  document.getElementById("ibre").style.left = "250px";
  document.getElementById("ibre").style.top = "220px";
}
function asama2() {
  document.getElementById("ibre").style.transform = "rotate(80deg)";
  document.getElementById("ibre").style.left = "165px";
  document.getElementById("ibre").style.top = "190px";
}
function asama1() {
  document.getElementById("ibre").style.transform = "rotate(40deg)";
    document.getElementById("ibre").style.top = "220px";
  document.getElementById("ibre").style.left = "120px";

}

#ibre {
    width:150px;
    position: absolute;
    left: 100px;
    top: 270px;
    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>

- Andrea Fiore