transformOrigin запущен из JavaScript, вращается неправильно

Question

При использовании transformOrigin в javascript вращение не становится правильным.В настройках transform-origin я использую координаты X / Y (100% / 50%), поскольку 50% - это средняя точка для каждой оси.

Проблема: При запуске анимации правильны как начальная, так и конечная точки анимации.Во время анимации «линейный индикатор» поворачивается на угол, который кажется неправильным.Если вы представляете анимацию как часы, «поворотный индикатор» явно покидает свой центр при вращении.

Требуемое поведение: Мне нужен движущийся «индикатор линии» для перемещениявокруг стола красный центр креста.Я ищу метод выполнения поворота с использованием 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

В вашем случае вам нужно только сделать это right НО проблема в том, что вы применяете преобразование одновременно, поэтому оно может не вступить в силу.

ОБНОВЛЕНИЕ

Этот ответ дал правильную причину поведения.

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 2

Поскольку вы должны избегать использования Timeout, когда в этом нет необходимости, я предлагаю вам добавить только transition эффект к свойству transform, например:

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

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

Если вам нужно для анимации всего, вы можете использовать x.transition = "all 3s, transform-origin 0s";.

Надеюсьпомогает.

Answer 3

Вам нужно установить transform-origin: 100% 50%; перед настройкой преобразования или вы можете использовать его непосредственно в css

Редактировать

В соответствии с другими ответами лучше неанимируйте transformOrigin и просто анимируйте transform в 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;
}

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