变换旋转图像定位问题

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>

Answer 2

使用它也取决于您使用的浏览器。

$(ele).css({"-moz-transform":"rotate(" + degree + "deg)"});
$(ele).css({"-ms-transform":"rotate(" + degree + "deg)"});
$(ele).css({"-webkit-transform":"rotate(" + degree + "deg)"});
$(ele).css({"transform":"rotate(" + degree + "deg)"});

Answer 3

我已经使用滑块创建了一个示例，尽管transform会以图形方式旋转元素，但确实如此。

 $(document).ready(function() { var degree; $(document).on("input", "#myRange", function(){ degree = $(this).val(); $(".element").css('transform', 'rotate(' + degree + 'deg)'); }); });

 .element { position: absolute; top:30%; transform-origin: 50% 50%; width:20%; } #angleslider{ width:100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="angleslider"> <span>0 deg</span> <input type="range" min="1" max="350" value="50" class="slider" id="myRange"><span> 360 deg </span> </div> <div class="container"> <img class="element" src="http://img.freepik.com/free-icon/move-to-next_318-80203.jpg?size=338c&ext=jpg"> </div>

Answer 4

我通过向我拥有的每个图像添加一个容器，将所有属性移动到 div 并仅在图像上进行transform-rotate来解决我的问题