javascript - 从 javascript 触发的 transformOrigin，旋转不正确

Question

在 javascript 中使用 transformOrigin 时，旋转不正确。在 transform-origin 的设置中，我使用 X/Y 坐标 (100%/50%)，因为 50% 是每个轴的中点。

问题: 运行动画时，动画的起点和终点都是正确的。在动画过程中，“线指示器”转动的 Angular 似乎不正确。如果您将动画想象成一个时钟，“线指示器”在旋转时显然会离开其中心。

通缉行为:我需要移动的“线指示器”在背景红色中心十字周围移动。我正在寻找一种使用 javascript transformOrigin 执行旋转的方法。

var deg = 180;

function myFunction() {
x = document.getElementById("indicator").style;
x.transform = "rotate(" + deg + "deg)";
x.transformOrigin = "100% 50%"; // Rotate in the center of div.
x.transition = "all 3s";
}

.indicator {
  z-index: 3;
  position: absolute;
  background-color: black;
  width: 150px;
  height: 10px;
  margin: 212px 0px 0px 100px;
}

.background-box {
  position: absolute;
  z-index: 1;
  background-color: white;
  height: 300px;
  width: 300px;
  margin: 50px 0px 0px 100px;
}

#button {
  height: 40px;
  width: 180px;
}


.checkmark-horizontal {
  z-index: 2;
  position: absolute;
  background-color: red;
  width: 300px;
  height: 3px;
  margin: 214px 0px 0px 100px;
}

.checkmark-vertical {
  z-index: 2;
  position: absolute;
  background-color: red;
  width: 3px;
  height: 300px;
  margin: 50px 0px 0px 250px;
}

<button id = "button" type = "button" name = "button" onclick = "myFunction()">Move indicator 180 degrees </button>

<div class="background-box"></div>

<div id="indicator" class="indicator"></div>

<div class="checkmark-horizontal"></div>
<div class="checkmark-vertical"></div>

Answer 1

在设置转换前需要设置transform-origin: 100% 50%;或者直接在css中使用

编辑

根据其他答案，最好不要为 transformOrigin 设置动画，而只为 transition 属性中的 transform 设置动画

var deg = 180;

function myFunction() {
  x = document.getElementById("indicator").style;
  x.transformOrigin = "100% 50%"; // Rotate in the center of div.
  x.transition = "transform 3s";
  x.transform = "rotate(" + deg + "deg)";



}

.indicator {
  z-index: 3;
  position: absolute;
  background-color: black;
  width: 150px;
  height: 10px;
  margin: 212px 0px 0px 100px;
}

.background-box {
  position: absolute;
  z-index: 1;
  background-color: white;
  height: 300px;
  width: 300px;
  margin: 50px 0px 0px 100px;
}

#button {
  height: 40px;
  width: 180px;
}

.checkmark-horizontal {
  z-index: 2;
  position: absolute;
  background-color: red;
  width: 300px;
  height: 3px;
  margin: 214px 0px 0px 100px;
}

.checkmark-vertical {
  z-index: 2;
  position: absolute;
  background-color: red;
  width: 3px;
  height: 300px;
  margin: 50px 0px 0px 250px;
}

<button id="button" type="button" name="button" onclick="myFunction()">Move indicator 180 degrees </button>

<div class="background-box"></div>

<div id="indicator" class="indicator"></div>

<div class="checkmark-horizontal"></div>
<div class="checkmark-vertical"></div>