Question

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

问题：运行动画时，动画的起点和终点都是正确的。在动画期间，＆＃34;线指示符＆＃34;转弯似乎不正确的角度。如果您将动画想象成一个时钟，那么＆＃34;线指示符＆＃34;旋转时显然离开了它的中心。

通缉行为：我需要移动＆＃34;线路指示器＆＃34;移动背景红色中心十字架。我正在寻找一种使用javascript transformOrigin执行旋转的方法。

＆＃13;

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";
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您需要在设置转换之前设置transform-origin: 100% 50%;，或者您可以直接在css

中使用它

修改

根据其他答案，最好不要在transformOrigin属性<{1}}中设置transform动画<{1}}。

transition

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

Answer 2

在您的情况下，您只需要进行right但问题是您正在同时应用转换，因此它可能不会生效。

<强>更新

This answer给出了行为的正确理由。

var deg = 180;

x = document.getElementById("indicator").style;
x.transformOrigin = "right"; /*set it here before applying the transformation*/

function myFunction() {
  x = document.getElementById("indicator").style;
  x.transform = "rotate(" + deg + "deg)";
  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 3

您应该避免在没有必要时使用Timeout，我建议您只在transition属性上添加transform效果，如下所示：

＆＃13;

var deg = 180;

function myFunction() {
  x = document.getElementById("indicator").style;
  x.transform = "rotate(" + deg + "deg)";
  x.transformOrigin = "100% 50%";
  x.transition = "transform 3s"; // Don't animate all, only the transform!
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果您需要为所有人制作动画，则可以使用x.transition = "all 3s, transform-origin 0s";。

希望它有所帮助。

从javascript触发transformOrigin，旋转错误

3 个答案: