Question

我的小提琴链接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：右上角手柄旋转容器，容器和物品是兄弟姐妹。

Answer 1

如果您想将这些物品保留在外面，那么只需在应用于容器时对它们应用相同的转换

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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何将元素转换为另一个元素？

1 个答案: