javascript - 变换旋转图像定位问题

Question

我在以前用transform rotate 旋转过的图像周围移动时遇到问题。

更具体地说，当图像旋转时，top 和 left 属性不会更新，所以看起来图像只是以图形方式旋转。

我想做的是图像旋转后可以自由移动，但确实不够精确。

这是图像类

.element {
    position: absolute;
    transform-origin: 50% 50%;
    width:20%;
}

这是旋转代码

degree = $("#angleSlider").val();
$(ele).css('-moz-transform', 'rotate(' + degree + 'deg)');

这是html

<div class="container">
  <img class="element" src="img.png">
  <img class="element" src="img1.png">
  <img class="element" src="img2.png">
</div>

Answer 1

CSS Transform 不会改变左上角的属性值。

var img = document.getElementById('img');

document.getElementById('degree').addEventListener('input', function() {
  img.style.transform = "rotate(" + this.value + "deg)";
});

document.getElementById('top').addEventListener('input', function() {
  img.style.top = this.value + "px";
});

document.getElementById('left').addEventListener('input', function() {
  img.style.left = this.value + "%";
});

.img-container {
  position: relative;
  border: 2px solid red;
  margin: 0 0 20px;
  height: 200px;
  
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  outline: 2px solid blue;
  border: 1px solid white;
}

<div class="img-container">
  <img src="https://dummyimage.com/150x4:3/" id="img" />
</div>
<div>
  Rotate:
  <input type="range" id="degree" min="0" max="360" step="any" value="0" />
</div>
<div>
  Top:
  <input type="range" id="top" min="0" max="88" step="any" value="0" />
</div>
<div>
  Left:
  <input type="range" id="left" min="0" max="100" step="any" value="0" />
</div>