變換旋轉圖像定位問題

我在移動圖像時遇到問題，我之前用變換旋轉。變換旋轉圖像定位問題

更具體地說，當圖像旋轉時，頂部和左側的屬性沒有更新，所以看起來像圖像只是以圖形方式旋轉。

我想要做的是能夠在旋轉後自由移動圖像，但它確實不準確。

這是圖片類

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

來源

2017-09-26 Densi Ramja

將容器每個圖像我有，移動所有屬性到div，使transform-rotate裏面放一個圖片容器，而不是移動容器。 – AVAVT

你可以發佈一些HTML阿爾斯托更好地瞭解你的問題？ – sissy

*「所以看起來圖像只是以圖形方式旋轉。」* - 是的，這正是**變換'做的。 –

使用這個也要看你是什麼瀏覽器使用。

$(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)"});

來源

2017-09-26 13:26:44

我已經實現了跨瀏覽器兼容性，這不是問題 –

我已經使用滑塊創建了一個例子，雖然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>

來源

2017-09-26 13:42:34 bhansa

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>

來源

2017-09-26 13:52:08

這是一個很好的演示@Miraz – bhansa

謝謝你的讚賞@bhansa。 –

我解決我的問題只在圖像

來源

2017-09-26 14:32:16

檢查我的下面的答案，我沒有使用每個圖像的容器，但你可以使用id的具體目標。 – bhansa

變換旋轉圖像定位問題

回答

相關問題