画像回転の位置合わせの問題を解決する

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

が、それはまた、あなたが何であるか、ブラウザに依存し、これを使用しているありますを使用して。

$(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 2

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 3

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 4

私は、私が持っていた各画像にコンテナを追加することによって、私の問題を解決したのdivにすべてのプロパティを移動し、画像のみ