如何将元素旋转到另一个元素？答案

【问题标题】：How to rotate elements regarding to another element?如何将元素旋转到另一个元素？
【发布时间】：2017-11-22 06:42:46
【问题描述】：

我的小提琴链接here

<body>
        <div>
            <div id="wrapper" style="">
                <div id="container">
          <div class="handles">
            <span data-clickable="true" id="rotate-handle"></span>
          </div>
        </div>
                <div id="item_1" class="item" style=""></div>
                <div id="item_2" class="item" style=""></div>
                <div id="item_3" class="item" style=""></div>
            </div>
        </div>
    </body>
function rotateStart(e) {
            startAngle = Math.atan2(e.clientX - contatiner_x + contatiner_width / 2, - (e.clientY - container_y + container_height / 2) )*(180/Math.PI);
            window.addEventListener('mousemove', rotate, false);
            window.addEventListener('mouseup', rotateStop, false);
        }

        function rotate(e) {
            var angle         = Math.atan2(e.clientX - contatiner_x + contatiner_width / 2, - (e.clientY - container_y + container_height / 2) )*(180/Math.PI);
            var rotate_angle = angle - startAngle;
            contatier.style.transform = 'translate(50px, 100px) rotateZ('+rotate_angle+'deg)';
        }

        function rotateStop() {
            window.removeEventListener('mousemove', rotate, false);
        }

我正在研究它只是为了实验。我只想旋转所有项目以及没有变换原点的容器。

PS : 通过右上角的手柄旋转容器，容器和项目是兄弟姐妹。

【问题讨论】：

需要将物品放入容器jsfiddle.net/p21bg5pb/1
"没有变换原点" 不可能，总是围绕变换原点进行旋转。不过，您可以计算与原点相关的“偏移量”。

标签： javascript rotation trigonometry

【解决方案1】：

如果您想将项目保留在外面，那么只需对它们应用与应用于容器相同的转换

document.querySelectorAll(".item").forEach(function(element) {
    element.style.transform = 'translate(50px, 100px) rotateZ(' + rotate_angle + 'deg)';
});

演示

var rotate_handle = document.getElementById('rotate-handle'),
  contatier = document.getElementById("container");
rotate_handle.addEventListener('mousedown', rotateStart, false);

let contatiner_x = 50,
  container_y = 100,
  contatiner_width = 240,
  container_height = 300;

function rotateStart(e) {
  startAngle = Math.atan2(e.clientX - contatiner_x + contatiner_width / 2, -(e.clientY - container_y + container_height / 2)) * (180 / Math.PI);
  window.addEventListener('mousemove', rotate, false);
  window.addEventListener('mouseup', rotateStop, false);
}

function rotate(e) {
  var angle = Math.atan2(e.clientX - contatiner_x + contatiner_width / 2, -(e.clientY - container_y + container_height / 2)) * (180 / Math.PI);
  var rotate_angle = angle - startAngle;
  contatier.style.transform = 'translate(50px, 100px) rotateZ(' + rotate_angle + 'deg)';
  document.querySelectorAll(".item").forEach(function(element) {
    element.style.transform = 'translate(50px, 100px) rotateZ(' + rotate_angle + 'deg)';
  });
}

function rotateStop() {
  window.removeEventListener('mousemove', rotate, false);
}

#container {
  transform: translate(50px, 100px);
  width: 240px;
  height: 300px;
  z-index: 1;
  position: absolute;
  outline: 3px solid #000;
}

#rotate-handle {
  position: absolute;
  border: 3px solid #000;
  border-radius: 25%;
  padding: 1px;
  background: red;
  top: -10px;
  right: -10px;
}

#item_1 {
  width: 200px;
  height: 100px;
  left: 50px; top:100px;
  position: absolute;
  border: 1px solid #000
}

#item_2 {
  width: 190px;
  height: 100px;
  left: 100px; top:300px;
  position: absolute;
  border: 1px solid #000
}

#item_3 {
  width: 50px;
  height: 50px;
  left: 75px; top:200px;
  position: absolute;
  border: 1px solid #000
}

<div>
  <div id="wrapper" style="">
    <div id="container">
      <div class="handles">
        <span data-clickable="true" id="rotate-handle"></span>
      </div>
    </div>
    <div id="item_1" class="item" style=""></div>
    <div id="item_2" class="item" style=""></div>
    <div id="item_3" class="item" style=""></div>
  </div>
</div>

【讨论】：

我无法动态添加容器，因此我想将在容器中选择的项目与容器一起保留。我每个项目都需要它；角度和 (x,y) 坐标。
谢谢，但是物品应该在容器中作为初始。