Question

我在使用变换旋转之前旋转的图像中移动时遇到问题。

更具体地说，当旋转图像时，顶部和左侧属性不会更新，因此图像仅以图形方式旋转。

我想做的是能够在旋转后自由移动图像，但实际上并不精确。

这是图像类

.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变换不会更改左上角的属性值。

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

变换旋转图像定位问题

4 个答案: